JavaScript动态生成表格

注：思路以及重点步骤在最下方
HTML

<table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

JavaScript

var datas = [
	{
		name:'易烊千玺',
		subject:'javascript',
		sorce: 100
	},
	{
		name:'迪丽热巴',
		subject:'javascript',
		sorce: 90
	},
	{
		name:'古力娜扎',
		subject:'javascript',
		sorce: 80
	},
	{
		name:'上官卿言',
		subject:'javascript',
		sorce: 80
	}
];
var tbody = document.querySelector('tbody');
// 第一轮循环遍历的是数组，拿到行
for(var i = 0; i < datas.length; i++){
	var tr = document.createElement('tr');
	// 第二轮循环遍历的是数组的每个对象datas[i]，拿到单元格
	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='javascript:;'>删除</a>"
    tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++){
	// 删除当前a所在的行，(a链接爸爸的爸爸)
	as[i].onclick = function(){
		tbody.removeChild(this.parentNode.parentNode);
	}
}

重点步骤：

1. 先准备好学生的数据，以数组的形式呈现，删除表格的操作不需要写进数组，{我是没有写进去，如果各位大佬会可以教教我}。
2. 所有数据都生成在tbody里面。
3. 因为行很多，需要循环，用到了创建和追加。document.creatElement()和node.appendChild()。{这两个公式特别容易写错，大家一定要用心记}
4. 往里面创建单元格th，此时datas[i]是进行遍历数组的而每个对象。
5. 把对象里的属性值给单元格。td.innerHTML = data[i][k]
6. 最后一列单元格是删除，需要单独创建，它不在第二层循环中，在第一层循环中。
7. 删除操作，跳出循环，重新循环。重点:node.removeChild(); node.parentNode().