• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery点击添加或者删除表格行代码示例

jQuery 程序员 3年前 (2019-01-15) 119次浏览 已收录 0个评论

分享一段代码实例,它实现了点击添加或者删除表格行的功能。
代码实例如下:

点击对应按钮能够删除和或者添加行,下面介绍一下实现过程。

一.代码注释:

(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点击添加或者删除表格行代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。
[code]<!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>[/code]

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址