CODEWITHSUNDEEP
javascriptjsphtml-table
crchin
crchin

Reputation: 9683

Get value from td when button is clicked.

This is a part of my JSP code:

    <tr style="background-color: #F0F0F0; ">
        <td class="leavehistory" style="width: 6%; padding: 7px;"><%=i++%></td>
        <td id="leaveID" class="leavehistory" style="width: 9%;"><%=rs.getString(7)%></td>
        <td class="leavehistory" style="width: 12%;"><%=rs.getTimestamp(1)%></td>
        <td class="leavehistory" style="width: 10%;"><%=rs.getInt(2)%> days</td>
        <td class="leavehistory" style="width: 15%;"><%=rs.getString(3)%> - <%=rs.getString(4)%></td>
        <td class="leavehistory" style="width: 15%;"><%=rs.getString(5)%></td>
        <td style="width: 30%;"><select>
                  <option value="0">Pending</option>
                  <option value="1">Cancel</option>
            </select> <input class="button"  type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button"  type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
    </tr>
<% } %>

This is how 2 rows of the generated HTML output look like:

<tr style="background-color: #F0F0F0; ">
    <td class="leavehistory" style="width: 6%; padding: 7px;">1</td>
    <td id="leaveID" class="leavehistory" style="width: 9%;">LE000002</td>
    <td class="leavehistory" style="width: 12%;">2012-01-17 19:31:18.0</td>
    <td class="leavehistory" style="width: 10%;">2 days</td>
    <td class="leavehistory" style="width: 15%;">18/01/2012 - 19/01/2012</td>
    <td class="leavehistory" style="width: 15%;">Sick</td>
    <td style="width: 30%;"><select>
              <option value="0">Pending</option>
              <option value="1">Cancel</option>
        </select> <input class="button"  type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button"  type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>


<tr style="background-color: #F0F0F0; ">
    <td class="leavehistory" style="width: 6%; padding: 7px;">2</td>
    <td id="leaveID" class="leavehistory" style="width: 9%;">LE000003</td>
    <td class="leavehistory" style="width: 12%;">2012-01-18 03:04:15.0</td>
    <td class="leavehistory" style="width: 10%;">1 days</td>
    <td class="leavehistory" style="width: 15%;">19/01/2012 - 20/01/2012</td>
    <td class="leavehistory" style="width: 15%;">Sick</td>
    <td style="width: 30%;"><select>
              <option value="0">Pending</option>
              <option value="1">Cancel</option>
        </select> <input class="button"  type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button"  type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>

These 2 rows of data are retrieved from database. For each row there is one View and Change button. If I click on the Change button for the LE000001's row, then I will get the value - "LE000001". Then I can use the value to update the status of leave record.

If I click on the Change button for the LE000002's row, then I will get the value - "LE000002". Since there are only 2 rows shown.

It can be as many as possible if the database has more records. Is there any way to get the value?

Upvotes: 1

Views: 773

Answers (1)

JB Nizet
JB Nizet

Reputation: 691903

First of all, your HTML is invalid, because you have several elements with the same leaveID ID.

Now to answer your question, why don't you simply make your JS functions take the ID of the row as argument:

onClick="cancelSub('LE000001');"

and thus to generate it:

onClick="cancelSub('<%= rs.getString(7) %>');"

That said, using scriptlets and accessing JDBC resultsets from a JSP shows a lack of proper MVC architecture. Read How to avoid Java code in JSP files?

Upvotes: 1

Related Questions