HTML
tbody标签为空
<table class="mt">
<thead>
<tr>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS
table.mt {
width: 600px;
margin: 100px auto;
text-align: center;
border-spacing: 0px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
table.mt td {
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
padding: 10px;
}
table.mt thead tr {
background: #339;
color: #fff;
}
js动态生成表格,并且添加删除操作
<script>
// 1、数据
var datas = [{
name: '熊大',
subject: 'JavaScript',
score: 88,
}, {
name: '熊二',
subject: 'JavaScript',
score: 78,
}, {
name: '小胖',
subject: 'JavaScript',
score: 68,
}, {
name: '光头强',
subject: 'JavaScript',
score: 98,
}, ];
// 2、tbody里面创建行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
//建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 3、建单元格
for (var k in datas[i]) {
var td = document.createElement('td');
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 4、创建删除操作
var td = document.createElement('td');
td.innerHTML = '<button>删除</button>'
tr.appendChild(td);
}
// 5、删除操作
var button = document.querySelectorAll('button')
for (var i = 0; i < button.length; i++) {
// 删除所在的行(button的父级的父级) node.removeChild(child)
button[i].onclick = function() {
// 行的父级为tbody
tbody.removeChild(this.parentNode.parentNode)
}
}
// for( var k in obj){
// k得到属性值名
// obj[k]属性值
// }
</script>