你的位置:首页 > Java教程

[Java教程]点击最后一行可以实现行自增效果的表格代码


点击最后一行可以实现行自增效果的表格代码:
现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.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),为表格的最后添加行。
二.相关阅读:
1.on()可以参阅jQuery的on()方法一章节。
2.e.target可以参阅jQuery的event.target属性一章节。 
3.closest()函数可以参阅jQuery的closest()函数一章节。 
4.index()函数可以参阅jQuery的index()方法一章节。
5.find()函数可以参阅jQuery的find()方法一章节。
6.last()函数可以参阅jQuery的last()方法一章节。 
7.clone()函数可以参阅jQuery的clone()方法一章节。 
8.text()函数可以参阅jQuery的text()方法一章节。
9.append()函数可以参阅jQuery的append()方法一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11420

更多内容可以参阅:http://www.softwhy.com/jquery/