JS 动态创建表格

首先写出一个自定义表头，DOM规定thead只能有一个，tbody可以有多个，tfoot只能有一个：

<table width="100%" id="table1" border="1px">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

下面我们对表格动态创建进行一些基础实现：

var data = [{
        id: 1,
        username: '小美',
        sex: '男'
      },
      {
        id: 2,
        username: '蚯蚓',
        sex: '男'
      },
      {
        id: 3,
        username: '关关',
        sex: '男'
      },
      {
        id: 4,
        username: '筱筱',
        sex: '男'
      },
    ];
    var oTable = document.getElementById('table1');
    var oTbody = oTable.tBodies[0];

    for (var i = 0; i < data.length; i++) {
      var oTr = document.createElement('tr');
      if (i % 2 == 0) {
        oTr.style.background = 'white';
      } else {
        oTr.style.background = 'gray';
      }

      var oTd = document.createElement('td');
      oTd.innerHTML = data[i].id;
      oTr.appendChild(oTd);

      var oTd = document.createElement('td');
      oTd.innerHTML = data[i].username;
      oTr.appendChild(oTd);

      var oTd = document.createElement('td');
      oTd.innerHTML = data[i].sex;
      oTr.appendChild(oTd);

      var oTd = document.createElement('td');
      var oHandle = document.createElement('a');
      oHandle.innerHTML = '删除';
      oHandle.href = 'javascript:;'
      oHandle.onclick = function () {
        oTbody.removeChild(this.parentNode.parentNode);

        for (var i = 0; i < oTbody.rows.length; i++) {
          if (i % 2 == 0) {
            oTbody.rows[i].style.background = 'white';
          } else {
            oTbody.rows[i].style.background = 'gray'
          }
        }
      }
      oTd.appendChild(oHandle);
      oTr.appendChild(oTd);


      oTbody.appendChild(oTr);
    }

现在我们的表格已经动态创建出来了，并且能够进行数据的删除操作。