基於jQuery實作點選最後一行實作行自增效果的表格_jquery
- WBOY原創
- 2016-05-16 15:20:341628瀏覽
現在任何事務都追求效率和人性化，當然網頁效果也是如此，如果一個可以編輯數據的表格，編輯到最後一行的時候，點擊可以自動添加一行，這樣算是一個比較人性化的效果，可以免去一絲勞頓之苦，以下分享一段這樣的程式碼。
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://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實現點擊最後一行實現行自增效果的表格的全部內容先給大家介紹這麼多，以上內容給大有註釋，有不明白得地方可以參考下，非常感謝大家一直以來對腳本之家網站的支援。