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


Posted in Javascript onJanuary 12, 2016

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style type="text/css">
table 
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td 
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child 
{
width:30px;
text-align:center;
}
table td input 
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus 
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序号</th>
<th>姓名</th>
<th>金额[USD]</th>
<th>时间</th>
<th>项目</th>
<th>单位</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>

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

一.代码注释:

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

Javascript 相关文章推荐
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
7个jQuery最佳实践
Jan 12 #Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 #Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 #Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 #Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 #Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 #Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
You might like
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php中Snoopy类用法实例
2015/06/19 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python 多核并行计算的示例代码
2017/11/07 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
当当网软件测试笔试题
2015/11/24 面试题
生产主管岗位职责
2013/11/10 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
天下第一关导游词
2015/02/06 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL