首先在页面引入jquery.js库文件
取表格当前行数据js代码:
$(function() { $(".myclass").each(function(){ var tmp=$(this).children().eq(3); var btn=tmp.children(); btn.bind("click",function(){ var id=btn.parent().parent().children("td").get(0).innerHTML; var name=btn.parent().parent().children("td").get(1).innerHTML; var age=btn.parent().parent().children("td").get(2).innerHTML; alert("id="+id+" name="+name+" age="+age); }); }); });
jsp代码:
<table border="1"> <thead> <tr> <th align="center"> id</th> <th align="center">姓名</th> <th align="center">年龄</th> <th align="center">编辑</th> </tr> </thead> <tbody> <c:forEach items="${list}" var="t"> <tr class="myclass"> <td align="center"> <c:out value="${t.id}"></c:out> </td> <td align="center"> <c:out value="${t.name}"></c:out> </td> <td align="center"> <c:out value="${t.age}"></c:out> </td> <td align="center"> <button id="edit" >编辑</button> </td> </tr> </c:forEach> </tbody> </table>
说明:list为后台传入,点击编辑按钮取得对应按钮行的值,效果图如下: