基于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编程起步(第六课)
Feb 27 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
vue最简单的前后端交互示例详解
Oct 11 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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代码包装修正版
2008/03/15 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php中in_array函数用法探究
2014/11/25 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
php函数连续调用实例分析
2015/07/30 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
修改发贴的编辑功能
2007/03/07 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python简单文本处理的方法
2015/07/10 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python Process多进程实现过程
2019/10/22 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
十一酒店活动方案
2014/02/20 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
篮球赛新闻稿
2015/07/17 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python