创建表格

创建表格
<body>
  <div id="box"></div>
  <script>
    // 模拟数据
    var datas = [
      { name: '张三1', subject: '语文', score: '99' },
      { name: '张三2', subject: '英语', score: '69' },
      { name: '张三3', subject: '语文', score: '29' },
      { name: '张三4', subject: '数学', score: '9' },
      { name: '张三5', subject: '语文', score: '93' },
      { name: '张三6', subject: '地理', score: '95' }
    ];
    
    // 动态创建表格

    // 1.创建table元素
    var table = document.createElement('table');
    var box = my$('box');
    box.appendChild(table);
    // 2.创建表头
    var thead = document.createElement('thead');
    table.appendChild(thead);
    table.border = '1px';
    table.width = '400px';
    table.style.borderCollapse = 'collapse';

    var tr = document.createElement('tr');
    thead.appendChild(tr);
    tr.style.height = '40px';
    tr.style.backgroundColor = 'lightgray';

    // var th = document.createElement('th');
    // tr.appendChild(th);
    // setInnerText(th,'姓名')

    // 遍历头部
    var headDatas = ['姓名', '科目', '分数', '操作',]
    for( var i = 0 ;i<headDatas.length; i++){
      var th = document.createElement('th');
      tr.appendChild(th);
      setInnerText(th, headDatas[i])
    }
    // 3.创建数据行
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    tbody.style.textAlign = 'center';

    // 创建行，每条数据就是一行，循环
    for( var i = 0 ;i<datas.length;i++){
      // data是一个学生的成绩
      var data = datas[i];
      tr = document.createElement('tr');
      tbody.appendChild(tr);

      // 遍历对象
      for(var key in data){
        var td = document.createElement('td');
        tr.appendChild(td);
        setInnerText(td,data[key])
      }
      // 创建操作行
      var td = document.createElement('td');
      tr.appendChild(td);
      var link = document.createElement('a');
      td.appendChild(link);
      link.href = 'javascript:void(0)';
      setInnerText(link,'删除');

      link.onclick = linkDelete;
    }
    
    function linkDelete() {
      // 删除元素  removeChild
      // 获取父元素
      var tr = this.parentNode.parentNode;
      // 获取要删除的行
      tbody.removeChild(tr);
      // 不执行javascript:void(0)
      return false;
    }

  </script>
</body>
推荐阅读更多精彩内容
