作者：美娟婉燕6386 | 来源：互联网 | 2024-09-30 10:33
JS动态生成表格案例
<!DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8" /><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0" /><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge" /><title>Document</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&＃61;"0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>var dates &＃61; [{name: &＃39;鹿乃&＃39;,subject: &＃39;Javascript&＃39;,score: 520,},{name: &＃39;花丸&＃39;,subject: &＃39;Javascript&＃39;,score: 100,},{name: &＃39;小东&＃39;,subject: &＃39;Javascript&＃39;,score: 98,},{name: &＃39;ののの&＃39;,subject: &＃39;Javascript&＃39;,score: 99,},{name: &＃39;小鹿包&＃39;,subject: &＃39;Javascript&＃39;,score: 5120,}];var tbody &＃61; document.querySelector(&＃39;tbody&＃39;);for (var i &＃61; 0; i < dates.length; i&＃43;&＃43;) {var tr &＃61; document.createElement(&＃39;tr&＃39;);tbody.appendChild(tr);for (var k in dates[i]) {var td &＃61; document.createElement(&＃39;td&＃39;); tr.appendChild(td); td.innerHTML &＃61; dates[i][k]; }var td &＃61; document.createElement(&＃39;td&＃39;);tr.appendChild(td);td.innerHTML &＃61; &＃39;删除&＃39;}var tbody &＃61; document.querySelector(&＃39;tbody&＃39;);var as &＃61; document.querySelectorAll(&＃39;a&＃39;);for (var i &＃61; 0; i < as.length; i&＃43;&＃43;) {as[i].onclick &＃61; function() {tbody.removeChild(this.parentNode.parentNode); }}</script></body>
</html>
京公网安备 11010802041100号