javascript动态删除或者添加table表格行代码实例

快乐打工仔发布于 2年前分类：实例代码

分享一段代码实例，它实现了动态删除或者添加tr表格行效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net</td>
      <td>青岛市南区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>前端教程网一</td>
      <td>www.pipipi.net</td>
      <td>青岛市南区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>前端教程网二</td>
      <td>www.pipipi.net</td>
      <td>青岛市南区</td>
    </tr>
    <tr>
      <td>4</td>
      <td>前端教程网三</td>
      <td>www.pipipi.net</td>
      <td>青岛市南区</td>
    </tr>
  </tbody>
</table>
</body>
</html>

上面的代码实现了我们的要去，非常的简单，更多内容参阅相关阅读。