基于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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
js动态为代码着色显示行号
May 29 Javascript
jquery form 加载数据示例
Apr 21 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
Vue学习之axios的使用方法实例分析
Jan 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实现获取文件mime类型的方法
2015/02/11 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
python回调函数的使用方法
2014/01/23 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python 对象和json互相转换方法
2018/03/22 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
建筑专业自荐信范文
2014/01/05 职场文书
经理助理岗位职责
2014/03/05 职场文书
初中教师个人总结
2015/02/10 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js