JavaScript實現網頁動態生成表格
阿新 • • 發佈:2020-11-27
JavaScript(JS)網頁–動態生成表格,供大家參考,具體內容如下
在網頁中,動態生成列表的內容,將陣列中的object加入到列表中(沒學到資料庫)。在HTML中建立thead,然後通過JavaScipt動態生成tbody。並且在每行最後申城一個單元格,加入刪除操作,點選刪除可以刪除此行。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>動態生成表格</title> <style> table { border-collapse: collapse; margin-top: 200px; margin-left: 500px; } table th{ border: 1px solid black; width: 80px; height: 40px; text-align: center; background-color: cornsilk; } table td{ border: 1px solid black; width: 80px; height: 40px; text-align: center; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> <!-- <tr> <td>張三</td> <td>JavaScript</td> <td>100</td> <td><a href="JavaScript:;" >刪除</a></td> </tr> <tr> <td>李四</td> <td>JavaScript</td> <td>95</td> <td><a href="JavaScript:;" >刪除</a></td> </tr> <tr> <td>王五</td> <td>JavaScript</td> <td>98</td> <td><a href="JavaScript:;" >刪除</a></td> </tr> <tr> <td>趙六</td> <td>JavaScript</td> <td>91</td> <td><a href="JavaScript:;" >刪除</a></td> </tr> --> </tbody> </table> <script> //加入資料 var datas = [ { name:'張三',subject:'JavaScript',score:'100' },{ name:'李四',score:'95' },{ name:'王五',score:'98' },{ name:'趙六',score:'92' } ]; //建立行,有幾個人就建立幾行 var tbody =document.querySelector('tbody') for(var i = 0 ; i < datas.length ; i++){ //建立行 var tr = document.createElement('tr'); tbody.appendChild(tr); //建立單元格 for (var k in datas[i] ){ var td = document.createElement("td"); td.innerText = datas[i][k]; tr.appendChild(td); } //建立刪除單元格 var td = document.createElement('td'); td.innerHTML = '<a href="JavaScript:;" >刪除</a>'; tr.appendChild(td); } var as = document.querySelectorAll('a'); for (var i = 0 ; i <as.length ; i++){ as[i].onclick = function(){ //點選a 刪除當前行 tbody.removeChild(this.parentNode.parentNode); } } // for (var k in Obj){ // k 得到的是屬性名 // dbj[k] 得到的是屬性值 // } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。