JavaScript點選新增行或者刪除行

螞蟻小編發表於2017-03-16
JavaScript

點選按鈕新增或者刪除行是常用的操作，例如根據實際需要新增一行，或者感覺新增的行不妥，也可以點選刪除此行，下面就通過例項程式碼介紹一下如何實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
tr{height:30px;}
#tab1{  
  width:800px; 
  margin-left:300px;
  margin-top:10px;
  margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var oName=document.getElementById('txt1');
  var oEasyName=document.getElementById('txt2');
  var oHero=document.getElementById('txt3');
  var oBtn=document.getElementById('btn');
  var oTab=document.getElementById('tab1');
  var num=oTab.tBodies[0].rows.length + 1;
  oBtn.onclick=function(){
    var oTr=document.createElement('tr');
    var oTd=document.createElement('td')
    oTd.innerHTML=num++;
    oTr.appendChild(oTd);
    var oTd=document.createElement('td');
    oTd.innerHTML=oName.value;
    oTr.appendChild(oTd);
    var oTd=document.createElement('td');
    oTd.innerHTML = oEasyName.value;
    oTr.appendChild(oTd);
    var oTd=document.createElement('td');
    oTd.innerHTML=oHero.value;
    oTr.appendChild(oTd);
    var oTd=document.createElement('td');
    oTd.innerHTML='<a href="#">刪除</a>';
    oTr.appendChild(oTd);
    oTd.getElementsByTagName('a')[0].onclick=function(){
      oTab.tBodies[0].removeChild(this.parentNode.parentNode);
    }
    oTab.tBodies[0].appendChild(oTr);
  }
};
</script>
</head>
<body>
<div style="margin-left: 300px; margin-top: 30px;"> 
  種族名稱：<input type="text" id="txt1" />
  種族簡稱：<input type="text" id="txt2" />
  英雄：<input type="text" id="txt3" />
  <input type="button" id="btn" value="新增資訊" />
</div>
<table id="tab1" border="1">
  <thead>
    <tr style="background-color: #FF0000">
      <td> 序號 </td>
      <td> 種族名稱 </td>
      <td> 種族簡稱 </td>
      <td> 英雄 </td>
      <td> 操作 </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
      <td> 人類聯盟 </td>
      <td> HUM </td>
      <td> 代表性英雄：AM </td>
      <td></td>
    </tr>
    <tr>
      <td> 2 </td>
      <td> 獸人部落 </td>
      <td> ORC </td>
      <td> 代表性英雄：BM </td>
      <td></td>
    </tr>
    <tr>
      <td> 3 </td>
      <td> 不死亡靈 </td>
      <td> UD </td>
      <td> 代表性英雄：DK </td>
      <td></td>
    </tr>
    <tr>
      <td> 4 </td>
      <td> 暗夜精靈 </td>
      <td> NE </td>
      <td> 代表性英雄：DH </td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

程式碼實現了要求，當點選按鈕的時候能夠新增一行，點選後面的刪除按鈕也能夠刪除當前行，下面介紹一下實現此效果的過程:

一.實現原理:

（1）.點選新增行：

原理其實很簡單，那就是使用createElement()函式動態的建立行和td單元格，然後為建立的單元格新增內容，然後使用appendChild()函式為行新增單元格，最後再使用appendChild()函式為表格新增行，這就實現了點選按鈕新增行的效果。

（2）.點選刪除行：

在行的最後一個單元格會有一個連結按鈕，點選能夠刪除當前行，這是通過removeChild()函式刪除當前點選的按鈕的的父元素的父元素（也就是當前按鈕所在的行）實現的。

二.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢之後再去執行函式中的程式碼。

（2）.var oName=document.getElementById('txt1')，獲取指定id的物件。

（3）.var num=oTab.tBodies[0].rows.length + 1，以上程式碼在當前單元格行數的基礎上再加1，以作為第一個新增的行的id。

（4）.oBtn.onclick=function(){}，為新增按鈕註冊事件處理函式。

（5）.var oTr=document.createElement('tr')，建立一個行物件。

（6）.var oTd=document.createElement('td')，建立一個單元格物件。

（7）.oTd.innerHTML=num++，先將num值作為oTD的innerHTML內容，然後再加1。

（8）.oTr.appendChild(oTd)，將單元格物件新增到行物件。

（9）.oTd.getElementsByTagName('a')[0].onclick=function() {}，獲取單元格下第一個連結a，也就是刪除連結按鈕a，併為其註冊事件處理函式。

（10）.oTab.tBodies[0].removeChild(this.parentNode.parentNode)，刪除當前當前刪除按鈕的父元素的父元素。

相關文章