JavaScript 动态创建表格

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th {
    width: 100px;
    height: 50px;
}
          td{
            width: 100px;
            height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>动态创建表格</h1>
    <table id="wrap" border="1">
<thead>
<tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
    <th>操作</th>
</tr>
</thead>
<tbody id="tb">
    
</tbody>

    </table>





<script>
    function my$(id){return document.getElementById(id)};

//获取元素
var tb = my$("tb");
//模拟后台传输的数据
var datas = [
{name: "QQ",subject:"语文",score: 88},
{name: "到达",subject:"音乐",score: 60},
{name: "对对对",subject:"英语",score: 50},
{name: "啊啊啊",subject:"化学",score: 70},
{name: "撒",subject:"生物",score: 81},
{name: "尺寸",subject:"科学",score: 90},
{name: "前期",subject:"数学",score: 100}
];
//根据数组中的数据个数生成对应个数的tr
//将生成 tr 添加到 tbody 中
//数组遍历
for(var i = 0; i < datas.length; i++){
    //每一个数据都要生成一个tr
    var tr = document.createElement("tr");
//添加到tb中
tb.appendChild(tr);
//每一个 tr 中还需要添加对应的td
//每一行 内部的 td 中的数据来自于数组的每一项

var data = datas[i];
//遍历 data 对象，根据它的项数来确定添加的td的个数



for(var k in data){
    //生成一个td
    var td = document.createElement("td");
    //添加到tr中去
    tr.appendChild(td);
    //添加给每一个 td 数据
    td.innerText = data[k];



}


//除了前面动态获取的数据 td 之外，还要添加一个删除的 td


td = document.createElement("td");

tr.appendChild(td);

//最后一个td中需要添加一个a标签
var a = document.createElement("a");

a.innerText = "删除";
a.href = "javascript:void(0);"
//将a添加到td中
td.appendChild(a);
//给每个a标签添加一个点击事件，移除当前所在的行
a.onclick = function(){
    //找到所在的行tr
    var ddd = this.parentNode.parentNode;
    //从tbody中移除对应的tr
    tb.removeChild(ddd);
}


};







</script>




</body>
</html>