js_模拟动态生成表格

1.首先表格内容是不确定的,标题th不变, 所以我们给个宽度就行,
2.标题th不变,所以只管td,

第一步: 既然内容不确定,所以我们不要在HTML结构上写td,只写一个tbody,为什么? 我们可以往里面创建添加 tr、td 元素节点,

第二步: 我们首先要确定行数,怎么实现?
我们可以这样,把内容以对象的形式存放到数组里,而数组的"长度"就是我们的所求表格的“行数”,跟数组一样,每个对象之间用逗号隔开

第三步: 就是往里面添加元素节点,往谁添加?
当然是往tbody添加,所以要把tbody获取过来

第四步: 确定行数,既然行数是有存放对象的数组决定的,所以我们要便利数组,

第五步: 往 tbody 里面创建添加 tr 节点,
注意! 是往后面添加 .appendChild

添加 tr 节点后如下图:

第六步:创建单元格,如何创建?
每行单元格的多少就是你内容存放到对象的长度,所以要便利对象
注意! 这里对象的长度正好是数组的长度,所用借用 i

第七步: 创添加 td 节点,把对象内容给 td

效果图:

第八步: 添加一个删除操作,创建添加新的 td ,以innerHTML的形式创建一个a标签
注意! 不要在便利对象里面写,删除操作不是存放在对象里,所以要在外写

第九步: 把所有a取过来 ,便利a, 在注册事件,在指定删除节点操作,这里语法有些坑, tbody.removeChild(this.parentNode.parentNode); 解释:是 删除 tbody 里的 当前 a 的上一个上一个父亲也就是 tr

删除前:

删除后:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    thead>tr {
      height: 43px;
      background-color: #cccccc;
    }

    td,
    th {
      border: 1px #333 solid;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>职位</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
<script>
  var datas = [{
    name: '许嵩',
    gender: '男',
    age: 32,
    position: '音乐总监'
  }, {
    name: '李宗盛',
    gender: '男',
    age: 62,
    position: '音乐人'
  }, {
    name: '林俊杰',
    gender: '男',
    age: 33,
    position: '歌手'
  }, {
    name: '林俊杰',
    gender: '男',
    age: 33,
    position: '歌手'
  }];
  var tbody = document.querySelector('tbody');
  for (var i = 0; i < datas.length; i++) {
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (var k in datas[i]) {
      var td = document.createElement('td');
      td.innerHTML = datas[i][k];
      tr.appendChild(td);
    }
    var td = document.createElement('td');
    td.innerHTML = '<a href="javascropt:;">删除</a>';
    tr.appendChild(td);
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
      as[i].addEventListener('click', function () {
        tbody.removeChild(this.parentNode.parentNode);
      });
    }
  }

</script>

</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页