javascript動態刪除或者新增table表格行程式碼例項

admin發表於2017-04-15
JavaScript行程

分享一段程式碼例項，它實現了動態刪除或者新增tr表格行效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function() {
  var oTab = document.getElementById('tab1');
 
  var oBtn = document.getElementById('btn1');
  var oName = document.getElementById('name');
  var oAge = document.getElementById('age');
  var id = oTab.tBodies[0].rows.length + 1;
 
  oBtn.onclick = function() {
    var oTr = document.createElement('tr');
 
    var oTd = document.createElement('td');
    oTd.innerHTML = id++; //?
    oTr.appendChild(oTd);
 
    var oTd = document.createElement('td');
    oTd.innerHTML = oName.value;
    oTr.appendChild(oTd);
 
    var oTd = document.createElement('td');
    oTd.innerHTML = oAge.value;
    oTr.appendChild(oTd);
 
    var oTd = document.createElement('td');
    oTd.innerHTML = '<a href="javascript:;">刪除</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>
網站名稱：<input id="name" type="text" />
url：<input id="age" type="text" />
<input id="btn1" type="button" value="新增" />
<table id="tab1" border="1" width="500">
  <thead>
    <td>ID</td>
    <td>webName</td>
    <td>url</td>
    <td>address</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>螞蟻部落</td>
      <td>www.softwhy.com</td>
      <td>青島市南區</td>
    </tr>
    <tr>
      <td>2</td>
      <td>螞蟻部落一</td>
      <td>www.softwhy.com</td>
      <td>青島市南區</td>
    </tr>
    <tr>
      <td>3</td>
      <td>螞蟻部落二</td>
      <td>www.softwhy.com</td>
      <td>青島市南區</td>
    </tr>
    <tr>
      <td>4</td>
      <td>螞蟻部落三</td>
      <td>www.softwhy.com</td>
      <td>青島市南區</td>
    </tr>
  </tbody>
</table>
</body>
</html>

上面的程式碼實現了我們的要去，非常的簡單，更多內容參閱相關閱讀。

相關閱讀:

（1）.rows可以參閱表格table rows一章節。

（2）.document.createElement()可以參閱document.createElement()一章節。

（3）.innerHTML可以參閱innerHTML一章節。

（4）.appendChild()可以參閱appendChild()一章節。

（5）.parentNode可以參閱parentNode一章節。

相關文章