基于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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JS中常用的消息框总结
Feb 24 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
javascript中动态函数用法实例分析
2015/05/14 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
基python实现多线程网页爬虫
2015/09/06 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python requests模块实例用法
2019/02/11 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python多任务之协程的使用详解
2019/08/26 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
django的autoreload机制实现
2020/06/03 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
辞职书格式样本
2015/02/26 职场文书