點選最後一行表格行自增效果

admin發表於2018-11-22

現在追求效率和人性化並存，網頁效果也是如此，比如一個可以編輯資料的表格，編輯到最後一行的時候，點選可以自動新增一行，下面分享一段這樣的程式碼。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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>
</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()一章節。

相關文章