基于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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 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安全技术之 实现php基本安全
2010/09/04 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP防盗链代码实例
2014/08/27 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php提交post数组参数实例分析
2015/12/17 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jQuery实现自定义下拉列表
2015/01/05 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
Python常见异常分类与处理方法
2017/06/04 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python绘制圆柱体的方法
2018/07/02 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
python实现批量修改文件名
2020/03/23 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python3让print输出不换行的方法
2020/08/24 Python
Django数据库迁移常见使用方法
2020/11/12 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
高职助产应届生自荐信
2013/09/24 职场文书
殡葬服务心得体会
2014/09/11 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
德劲DE1105机评
2022/04/05 无线电