基于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 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
简单实现js轮播图效果
Jul 14 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
JS实现li标签的删除
Apr 12 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
js使用心得分享
2015/01/13 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python input函数使用实例解析
2019/11/22 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
什么是Python中的顺序表
2020/06/02 Python
python程序如何进行保存
2020/07/03 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
应届生求职自荐信
2014/07/04 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
车辆转让协议书
2014/09/24 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
青年文明号汇报材料
2014/12/23 职场文书
服务承诺书
2015/01/19 职场文书
岗位聘任报告
2015/03/02 职场文书
边城读书笔记
2015/06/29 职场文书
导游词之临安白水涧
2019/11/05 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL