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

  • 内容
  • 评论
  • 相关

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

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

一.代码注释:

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


注意:如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery点击添加或者删除表格行代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注