點擊最後一行可以實現行自增效果的表格代碼:現在任何事務都追求效率和人性化，當然網頁效果也是如此，如果一個可以編輯數據的表格，編輯到最後一行的時候，點擊可以自動添加一行，這樣算是一個比較人性化的效果，可以免去一絲勞頓之苦，下麵分享一段這樣的代碼。代碼如下:螞蟻部落[/size][size=2] ...
點擊最後一行可以實現行自增效果的表格代碼:
現在任何事務都追求效率和人性化，當然網頁效果也是如此，如果一個可以編輯數據的表格，編輯到最後一行的時候，點擊可以自動添加一行，這樣算是一個比較人性化的效果，可以免去一絲勞頓之苦，下麵分享一段這樣的代碼。
代碼如下:
<!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/
