table 删除内容

最新推荐文章于 2022-11-01 15:56:42 发布

sjy7329

最新推荐文章于 2022-11-01 15:56:42 发布

阅读量388

点赞数

分类专栏： table

本文链接：https://blog.csdn.net/sunjynyue/article/details/78069704

版权

table 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>
  window.onload=function(){
    var oTab=document.getElementById('tab');
    var oName=document.getElementById('name');
    var oSex=document.getElementById('sex');
    var oAge=document.getElementById('age');
    var oBtn=document.getElementById('btn');
    var id=oTab.tBodies[0].rows.length+1;

    oBtn.onclick=function(){
      var oTr=document.createElement('tr');
//      id自增
      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=oSex.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);

      oTab.tBodies[0].appendChild(oTr);

      var oA=oTab.getElementsByTagName('a');

      for(var i=0;i<oA.length;i++){
        oA[i].onclick=function(){
          oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        }
      }
    }
  }
</script>
<body>
姓名：<input type="text" id="name">
性别：<input type="text" id="sex">
年龄：<input type="text" id="age">
<button id="btn">添加</button>
<table id="tab" width="500px" border="1">
  <thead>
    <tr>
      <th>id</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</body>
</html>

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table 删除内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oTab=document.getElementById('tab'); var oName=document.
复制链接

扫一扫