基于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入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 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
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
六一节目主持词
2014/04/01 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
长城的导游词
2015/01/30 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
python基础之函数的定义和调用
2021/10/24 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
一级电子管军用接收机测评
2022/04/05 无线电
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers