<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 400px;
table-layout: fixed;
}
table th {
background-color: rgb(212, 117, 61);
}
table td {
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var objs = [{
name: 'yagnwen',
age: '19',
s: 88
}, {
name: '哈狗',
age: '3',
s: 66
}, {
name: '哈狗',
age: '3',
s: 66
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < objs.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in objs[i]) {
var cell = document.createElement('td');
cell.innerHTML = objs[i][k];
tr.appendChild(cell);
}
var del = document.createElement('td');
del.innerHTML = "<a href='javascript:;'>删除</a>";
tr.appendChild(del);
}
var dels = document.getElementsByTagName('a');
for (var i = 0; i < dels.length; i++) {
dels[i].onclick = function () {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
表格比较重要的属性
border 设置表格和单元格的边框
表格重要的样式
border-collapse 表框折叠cellpadding 内容与单元格的距离
