动态生成表格

1. 创建行

var tr = document.createElement('tr'); //创建行节点
  tbody.appendChild(tr);

2. 创建单元格

     for (var k in obj[i]) { //控制创建单元格数
        var td = document.createElement('td'); // 创建单元格节点

3. 单元格填充数据

  td.innerHTML = obj[i][k];
  tr.appendChild(td);

4. 创建删除单元格

var td = document.createElement('td');
 td.innerHTML = "<a href = 'javascript:;'>删除</a>";
 tr.appendChild(td);

5. 添加删除操作

/删除操作：要对什么进行操作，事件就是什么
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
      as[i].onclick = function () {
        //分清楚删除谁，找准对象
        tbody.removeChild(this.parentNode.parentNode);

动态创建元素三种方法： 1）document.write() 如果页面文档流加载完毕，在调用会导致页面重绘

---

2）element.innerHTML 将内容写入DOM节点，不会导致页面重绘

---

3）document.creatElement()创建多个元素效率稍低，但是结构清晰

---

**注意：不同的浏览器下，innerETML效率要比creatElement高，但是innerHTML创建时不要采用拼接字符串，而是采用数组的形式拼接**

例子如图：