动态创建表格
1.数组中准备好数据
2.往tbody里创建行
3.往行里创建单元格
4.增加删除操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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: 95 }] // 2. 往tbody里面创建行: 有几个人(通过数组的长度) 就创建几行 var tbody = document.querySelector('tbody') for(var i=0;i<datas.length;i++){ //外面的for循环管行 tr var tr = document.createElement('tr') tbody.appendChild(tr) // 2.行里创建单元格(跟数据有关系的三个单元格) td 单元格的数量取决于每个对象里面的属性个数 for(var k in datas[i]) {//里面的for循环管列 td // 创建单元格 var td = document.createElement('td') // 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]); td.innerHTML = datas[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() { // 点击 a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } // for(var k in obj){ // k 得到的是属性名 // obj[k] 得到的是属性值 // } </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
