单击按钮时从td获取值

Get value from td when button is clicked.

本文关键字:获取 td 按钮 单击      更新时间:2023-09-26

这是我的JSP代码的一部分:

    <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>
<% } %>

这就是生成的HTML输出的2行的样子:

<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>

这两行数据是从数据库中检索的。每行都有一个"查看和更改"按钮。如果我点击LE000001行的Change按钮,那么我将得到值-"LE000001"。然后我可以使用该值来更新休假记录的状态。

如果我点击LE000002行的Change按钮,那么我将得到值-"LE000002"。因为只显示了2行。

如果数据库有更多的记录,它可以是尽可能多的。有什么方法可以得到价值吗?

首先,您的HTML是无效的,因为您有几个元素具有相同的leaveID ID。

现在,为了回答您的问题,为什么不简单地让JS函数将行的ID作为参数:

onClick="cancelSub('LE000001');"

从而生成它:

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

也就是说,使用scriptlet和从JSP访问JDBC结果集表明缺乏适当的MVC体系结构。阅读如何避免JSP文件中的Java代码?