效果图
结构
<table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table>
CSS
table {width: 500px;margin: 100px auto;background-color: pink;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}
JS
// 1 构造函数 明星 泛指某一大类 她类似于 java语言里面的 类(class)function Star (name, type, blood){this.name = name;this.type = type;this.blood = blood;}// 2 对象 是一个具体的事物 如廉颇 == { name: "廉颇", type: "力量型", blood: "500血量", sing: ƒ }var cz = new Star('村长', '葵花点穴手', '32');var xh = new Star('笑豪', '弹吉他', '59');var xn = new Star('笑楠', '召唤师峡谷', '79');var dates = [cz, xh, xn, {name: '少主',subject: 'JavaScript',score: 10}, {name: '羽神',subject: 'JavaScript',score: 80}, {name: '张飞',subject: 'JavaScript',score: 63}, {name: '关于',subject: 'JavaScript',score: 0}];// 2 往tbody 里面创建行 ： 有几个人我们就创建及行(通过数组的长度)var tbody = document.querySelector('tbody');for (var i = 0; i < dates.length; i++){// 1 创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 2 行里面创建单元格(跟数据有搞关系的三个单元格) td 单元格的数量取决于每个对相关里面的属性个数 有for循环遍历对象 dates[i]for (var k in dates[i]){var td = document.createElement('td');td.innerHTML = dates[i][k];tr.appendChild(td);}// 3 创建有删除两个字的单元格 var td = document.createElement('td');td.innerHTML = '<a href="JavaScript:;">删除</a>';tr.appendChild(td);}// 4 删除操作 开始var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++){as[i].onclick = function (){tbody.removeChild(this.parentNode.parentNode)}}
