DOM 节点操作之动态生成表格

天怀

于 2022-06-06 16:56:18 发布

阅读量528

点赞数

分类专栏：前端学习路线文章标签： html javascript css3

本文链接：https://blog.youkuaiyun.com/qq_39165819/article/details/125150100

版权

前端学习路线专栏收录该内容

17 篇文章

订阅专栏

该动态生成表格的操作采用dom的节点操作，生成节点，移除节点等知识

  <style>
    table{
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }
    td,th{
      border:1px solid darkgray;
    }
    thead tr{
      height: 40px;
      background-color: #ccc;
    }
  </style>
<body>
  <table cellspacing="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    var datas=[{
      name:"元婴",
      subject:"语文",
      score:"100分",
    },{
      name:"李白",
      subject:"语文",
      score:"98分",
    },{
      name:"元哥",
      subject:"语文",
      score:"98分",
    },{
      name:"钟馗",
      subject:"语文",
      score:"98分",
    }]

    var tbody=document.querySelector('tbody');
    for (var i=0;i<datas.length;i++){ //管理行 tr
      var tr=document.createElement('tr');
      tbody.appendChild(tr);
      //行里面创建单元格td
      for (var k in datas[i]){
        var td=document.createElement('td');
        //datas[i][k]获取到每行每列的具体值
        td.innerHTML=datas[i][k];
        tr.appendChild(td);
      }
      //3. 创建有删除2个字的单元格
      var td = document.createElement('td');
      td.innerHTML="<a href='javascript:;'>删除</a>"
      tr.appendChild(td);
      // for (var k in data[i]){
      //  k获取的是属性值
      // }
    }
    //4.删除单元格操作
    var del=document.querySelectorAll('a');
    for (var j=0;j<del.length;j++){
      del[j].onclick=function (){
        tbody.removeChild(this.parentNode.parentNode);
      }
    }
  </script>
</body>

效果
在这里插入图片描述