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

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了动态删除或者添加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>

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

相关阅读:

(1).rows可以参阅表格table rows一章节。

(2).document.createElement()可以参阅document.createElement()一章节。

(3).innerHTML可以参阅innerHTML一章节。

(4).appendChild()可以参阅appendChild()一章节。

(5).parentNode可以参阅parentNode一章节。

javascript动态删除或者添加table表格行代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript动态删除或者添加table表格行代码实例就介绍到这了。

javascript动态删除或者添加table表格行代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容