Get value from td when button is clicked.

Question

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?

Can you re-format your markup for better readability? (some of us don't have a lot of time reading through a lot of noise to get to your point in order to answer your question) Use code comments to highlight your problem area. Also I noticed there are three TD elements in there with the same ID of "leaveID" is that intentional? If so, that would be invalid HTML and you would have trouble accessing that element via ID using javaScript. — 7wp, Jan 17 '12 at 19:10
if maybe by getting the parent of the button clicked (id of parent div) and then, finding the element with id 'leaveId', and getting the value of (.val()) of this element, using jQuery? — Jeremy D, Jan 17 '12 at 19:16
You seem to be focusing on a JS-only solution. I just wanted to warn you that you need to make sure as well that your site works equally good when the client has JavaScript disabled. — BalusC, Jan 17 '12 at 19:41

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

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?

edited May 23 '17 at 12:21

Community

1
1

answered Jan 17 '12 at 19:13

JB Nizet

678,734
91
1,224
1,255

Yeah , you have solved my problem dude ! million of thanks . I will try to change my code to be MVC architecture. :) – crchin Jan 17 '12 at 19:45

Get value from td when button is clicked.

1 Answers1