直接上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>动态生成表格</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style></head><body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1.先去准备好学生的数据var datas = [{name: '魏璎珞',subject: 'JavaScript',score: 100}, {name: '弘历',subject: 'JavaScript',score: 98}, {name: '傅恒',subject: 'JavaScript',score: 99}, {name: '明玉',subject: 'JavaScript',score: 88}, {name: '大猪蹄子',subject: 'JavaScript',score: 0}];// 2.往tbody 里面创建行， 根据数组长度创建var tbody=document.querySelector('tbody')for(var i=0;i<datas.length;i++){// 1.1创建tr行var tr=document.createElement('tr');// 插入到tbody里面tbody.appendChild(tr)// 1.2行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环对象for(var k in datas[i]){// 创建单元格var td=document.createElement('td');td.innerHTML=datas[i][k]// 把对象的属性值 给tdtr.appendChild(td)}// 1.3 创建有删除2个字的单元格var td=document.createElement('td');td.innerHTML='<a href="#">删除</a>'tr.appendChild(td)}// 1.4删除操作 开始var as=document.querySelectorAll('a')for(var i=0;i<as.length;i++){as[i].onclick=function(){// 点击a 删除 当前a 所在的行 node.removeChild(child)tbody.removeChild(this.parentNode.parentNode)}}</script></body></html>
