微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

基于jQuery实现点击最后一行实现行自增效果的表格

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

代码如下:

rush:js;"> <Meta charset=" utf-8"> 编程之家 [/size] [size=2] 序号

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

一.代码注释:

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实现点击最后一行实现行自增效果的表格的全部内容先给大家介绍这么多,以上内容给大有注释,有不明白得地方可以参考下,非常感谢大家一直以来对编程之家网站的支持

原文地址:https://www.jb51.cc/jquery/50606.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


姓名 金额[USD] 时间 项目 单位 备注