单击按钮时从td获取值。

时间:2012-01-17 19:05:14

标签: javascript jsp html-table

这是我的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输出的两行如下所示:

<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行的更改按钮,那么我将得到值 - “LE000001”。然后我可以使用该值来更新请假记录的状态。

如果我点击LE000002行的更改按钮,那么我将得到值 - “LE000002”。由于只显示了2行。

如果数据库有更多记录,则可以尽可能多。有没有办法获得价值?

1 个答案:

答案 0 :(得分:1)

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

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

onClick="cancelSub('LE000001');"

然后生成它:

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

也就是说,使用scriptlet并从JSP访问JDBC结果集表明缺乏适当的MVC架构。阅读How to avoid Java code in JSP files?