基于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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
javascript call方法使用说明
Jan 11 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
原生js实现放大镜
2017/02/20 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python实现音乐下载器
2018/04/15 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python下载库的步骤方法
2019/10/12 Python
python实现飞机大战小游戏
2019/11/08 Python
python实现对变位词的判断方法
2020/04/05 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
个人求职信范例
2014/01/29 职场文书
美术毕业生求职信
2014/02/25 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS