站长资源网络编程
基于jquery的实现简单的表格中增加或删除下一行
简介代码如下: html 复制代码 代码如下:
| 1111 | |
|
代码如下:
html 复制代码 代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> </table> </div> jquery代码: 复制代码 代码如下: <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.1.js"><script type="text/javascript"> $(document).ready(function () { ModifyClick(); }); function ModifyClick() { $("table tr input[type='button'] ").each(function () { $(this).unbind("click"); $(this).bind("click", function () { if ($(this).val() == "添加下一行") { $(this).parent().parent().after("<tr><td>Add</td><td><input onclick=\"ModifyClick()\" type=button value=\"添加下一行\" /><input onclick=\"ModifyClick()\" type=button value=\"删除下一行\" /></td></tr>"); } if ($(this).val() == "删除下一行") { $(this).parent().parent().next().eq(0).remove(); } }); }); } </script> |