基于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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python中的global关键字的使用方法
2019/08/20 Python
Python使用进程Process模块管理资源
2020/03/05 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
生产部主管岗位职责
2014/01/06 职场文书
安全保证书
2015/01/16 职场文书
给朋友的道歉短信
2015/05/12 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js