jQuery点击添加或者删除表格行代码示例
分享一段代码实例,它实现了点击添加或者删除表格行的功能。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery点击添加或者删除表格行代码示例-gaodaima.com</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ var show_count=20; var count=$("input:text").val(); var fin_count=0; $("#btn_addtr").click(function(){ fin_count=$("tr").length-1 if(fin_count<show_count){ $("tr:eq(1)").clone().appendTo("table"); $("tr:last td input:first").val(++count); } }); }); function deltr(obj){ var length=$("tr").length; if(length<=2){ alert("至少保留一行"); } else{ $(arguments[0]).parent().parent().remove(); } } </script> </head> <body> <input type="button" id="btn_addtr" value="增行"> <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" align="center" bgcolor="#CCCCCC">ID</td> <td align="center" bgcolor="#CCCCCC">用户名</td> <td align="center" bgcolor="#CCCCCC">类型</td> <td align="center" bgcolor="#CCCCCC">其他</td> <td></td> </tr> <tr> <td height="30" align="center"><input type="text" size="2" value="1" /></td> <td align="center"><input type="text" name="username" /></td> <td align="center"><select name="type"> <option value="1">管理员</option> <option value="2">用户</option> </select></td> <td align="center"><input type="text" name="username2" /></td> <td><input type="button" value="删行" onclick="deltr(this)" /></td> </tr> </table> </body> </html> |
点击对应按钮能够删除和或者添加行,下面介绍一下实现过程。
一.代码注释:
(1).$(function(){}),当文档结构完全加载完毕之后再去执行函数中的代码。
(2).var show_count=20,声明一个变量并赋值,用来规定最大的行数。
(3).var count=$("input:text").val(),第一个文本框的value属性值,也就是第一个id值。
(4).var fin_count=0,声明一个变量并赋初值为0。
(5).$("#btn_addtr").click(function(){}),为添加按钮注册click事件处理函数。
(6).fin_count=$("tr").length-1,将当前除去标题行之外的总行数赋值给变量fin_count。
(7). if(fin_count<show_count),判断当前的除去标题行的总行数是否小于规定的行数。
(8).$("tr:eq(1)").clone().appendTo("table"),克隆第一行并将其追加到表格的尾部。
(9).$("tr:last td input:first").val(++count);,设置行的id。
(10).function deltr(obj){},此函数用来删除一行,参数是传递的一个对象。
(11).var length=$("tr").length,获取总行数。
(12).if(length<=2){alert("至少保留一行")},如果总行数小于等于2,则弹出提示。
(13).$(arguments[0]).parent().parent().remove();,删除当前按钮父元素的父元素,也就是当前行。
特别注意:arguments[0]是函数传递的第一个参数,也就是按钮对象this。
原创文章,转载请注明: 转载自搞代码
本文链接地址: jQuery点击添加或者删除表格行代码示例

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论