基于jQuery实现点击最后一行实现行自增效果的表格
现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算是一个比较人性化的效果，可以免去一丝劳顿之苦，下面分享一段这样的代码。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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实现点击最后一行实现行自增效果的表格的全部内容先给大家介绍这么多，以上内容给大有注释，有不明白得地方可以参考下，非常感谢大家一直以来对脚本之家网站的支持。
相关文章
jquery ajax后台返回list,前台用jquery遍历list的实现
下面小编就为大家带来一篇jquery ajax后台返回list,前台用jquery遍历list的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
jQuery实现点击按钮文字变成input框点击保存变成文字
这篇文章主要介绍了jQuery实现点击按钮文字变成input框点击保存变成文字的相关资料，非常具有参考借鉴价值,需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇jQuery中实现prop()函数控制多选框(全选,反选)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
当用户在表单里数据完数据后，之间按enter键就可以执行查询或者保存的操作。实现的思路如下2014-04-04
这篇文章主要介绍了jQuery插件开发精品教程让你的jQuery提升一个台阶 的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了基于jQuery拖拽事件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要详细介绍了jQuery 处理页面的事件的方法及相关资料,需要的朋友可以参考下2015-01-01
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。2015-11-11
基于daterangepicker日历插件使用参数注意的问题
下面小编就为大家带来一篇基于daterangepicker日历插件使用参数注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了jQuery横向擦除焦点图特效，一个具有自己特色的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。2015-09-09
最新评论