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() {// 行的父级为tbodytbody.removeChild(this.parentNode.parentNode)}}// for( var k in obj){//k得到属性值名//obj[k]属性值// }</script>
