js 表格的添加和删除操作

    大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步 
 

 

 

 （效果图）

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态生成表格案例</title>
  <style>

  </style>
</head>

<body>


  <style type="text/css">
    table.gridtable {
      font-family: verdana, arial, sans-serif;
      font-size: 11px;
      color: #333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
      width: 100%;
      font-size: 16px;
      text-align: center;
    }

    table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
    }

    table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
    }
  </style>

  <!-- Table goes in the document BODY -->
  <table class="gridtable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>


    </tbody>
  </table>


  <script>
    var data = [{
      name: '小明',
      subject: '物理',
      score: '100'
    },
    {
      name: 'marry',
      subject: '化学',
      score: '99'
    },
    {
      name: 'luxi',
      subject: '语文',
      score: '78'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    {
      name: 'city',
      subject: '英语',
      score: '88'
    },
    ];
    // 创建节点
    var tbody = document.querySelector('tbody');
    // 添加节点
    // 创建行和单元格
    for (var i = 0; i < data.length; i++) {
      // 创建tr行
      var tr = document.createElement('tr');
      tbody.appendChild(tr);

      //创建td单元格
      for (var k in data[i]) {
        //创建单元格
        var td = document.createElement('td');
        tr.appendChild(td);
        console.log(data[i][k]);
        td.innerHTML = data[i][k]

      }

      // 创建删除功能
      var td = document.createElement('td');
      td.innerHTML = '<a href = "javascript:;">删除</a>';
      // 添加节点
      tr.appendChild(td);

    }
    // 删除功能
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
      as[i].onclick = function () {
        // 删除的是a标签所在的行(链接的父亲的父亲)
        tbody.removeChild(this.parentNode.parentNode);
      }
    }

    // for(var k in obj){
    //   k -- 属性名
    //   obj[k] -- 属性值
    // }
  </script>
</body>

</html>

 

posted @ 2020-06-15 22:29  奔跑的前端猿  阅读(1424)  评论(0)  编辑  收藏  举报