视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
基于jQuery实现点击最后一行实现行自增效果的表格_jquery
2020-11-27 21:48:44 责编:小采
文档


现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码。

代码如下:






脚本之家


以上代码实现了我们的要求,点击表格的最后一行,可以自动添加新行,下面介绍一下它的实现过程。

一.代码注释:

1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.var oTable = $("#count"),获取id属性值为count的对象,在这里就是表格对象。
3.iNum = 1,声明一个变量并赋初值为1,以后可以每增加一行就会+1作为行号。
4.eEle = '',声明一个变量用来存储行对象。
5.oTable.on('click', function(e){}),为表格对象注册click事件处理函数。
6.var target = e.target,获取被点击的源对象。
7.oTr = $(target).closest('tr'),获取最近的tr祖辈元素。
8.f(oTr.index()==oTable.find('tr').last().index()),判断点击的是否是最后一行。
9.iNum++,iNum的值加1。
10.eEle = oTr.clone(),克隆当前行对象。
11.eEle.find('td').eq(0).text(iNum),设置最后一行第一个单元格的值。
12.oTable.append(eEle),为表格的最后添加行。

关于jQuery实现点击最后一行实现行自增效果的表格的全部内容先给大家介绍这么多,以上内容给大有注释,有不明白得地方可以参考下,非常感谢大家一直以来对脚本之家网站的支持。

下载本文
显示全文
专题