動態創建表格 · JavaScript

``` <style> #box table { border-collapse: collapse; } </style> </head> <body> <div id="box"> </div> <script> var datas = [ {name: '張三', subject: '語文', score: 90,}, {name: '李四', subject: '數學', score: 84,}, {name: '王五', subject: '英語', score: 93,}, {name: '趙六', subject: '語文', score: 60,}, {name: '貂蟬', subject: '數學', score: 55,}, ]; function $(id) { return document.getElementById(id); } //表頭數據 var headData = ['姓名', '科目', '成績', '操作']; var box = $('box'); //創建table var table = document.createElement('table'); box.appendChild(table); table.border = '1px'; table.width = '400px'; //創建表頭 var thead = document.createElement('thead'); table.appendChild(thead); var tr = document.createElement('tr'); thead.appendChild(tr); tr.style.height = '40px'; tr.style.backgroundColor = 'skyblue'; for (let i = 0; i < headData.length; i++) { var th = document.createElement('th'); tr.appendChild(th); th.innerText = headData[i]; } //創建數據行 var tbody = document.createElement('tbody'); table.appendChild(tbody); tbody.style.textAlign = 'center'; for (let i = 0; i < datas.length; i++) { //一個學生的成績 var data = datas[i]; tr = document.createElement('tr'); tbody.appendChild(tr); for (var key in data) { var td = document.createElement('td'); tr.appendChild(td); td.innerText = data[key]; } //生成刪除的對應列 td = document.createElement('td'); tr.appendChild(td); //刪除的超鏈接 var link = document.createElement('a'); td.appendChild(link); link.href = 'javascript:void(0)'; link.innerText = '刪除'; link.onclick = fn; } function fn() { //獲取當前按鈕所在的行 var tr = this.parentNode.parentNode; //獲取父元素 table.lastElementChild.removeChild(tr); return false; } </script> ```