我們通常會使用table標簽來展示數據內容，由於需要展示的數據內容是隨時更換的，所以不可能將展示的數據列表寫死在html寫死在頁面中，而是需要我們根據后台傳來的數據隨時更換，這個時候就需要我們使用js來動態生成表格。
首先我們需要先寫好頁面的樣式。
html部分
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js動態生成數據列表</title> <style type="text/css"> * { padding: 0; margin: 0; } #tb { width: 500px; border: 1px solid #000; border-collapse: collapse; } #tb td, #tb th { border: 1px solid #000; } #tb thead tr { height: 50px; } #tb tbody tr { text-align: center; height: 30px; } #tb a { text-decoration: none; } #tb a:hover { color: hotpink; } </style> <meta charset="utf-8" /> </head> <body> </body> </html>
這個時候我們可以通過ajax向服務端發送請求，獲取要展示的數據，由於主要目的是使用js動態展示列表，所本我們就假設已經獲取到后台的數據。
js部分
var headers = ["姓名", "學科", "成績", "刪除"]; var datas = [ { "name": "馬闖", "subject": "語文", "score": 90 }, { "name": "馬戶", "subject": "數學", "score": 100 }, { "name": "馬倫", "subject": "體育", "score": 9 }, { "name": "馬堯", "subject": "音樂", "score": 100 }, { "name": "馬震", "subject": "語文", "score": 90 }, { "name": "馬雲", "subject": "語文", "score": 90 } ]; creatTable(document.body, headers, datas); //將動態生成列表的部分封裝成函數，可以重復調用，也方便統一修改 function creatTable(parent, headers, datas) { var table = document.createElement("table"); table.id = "tb"; parent.appendChild(table); var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); thead.appendChild(tr); for (var i = 0; i < headers.length; i++) { var th = document.createElement("th"); th.innerHTML = headers[i]; tr.appendChild(th); } var tbody = document.createElement("tbody"); table.appendChild(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.innerHTML = datas[i][k]; tr.appendChild(td); } var td = document.createElement("td"); td.innerHTML = "<a href='javascript:'>刪除</a>"; tr.appendChild(td); td.children[0].onclick = function { var lines = tbody.children.length; if (lines <= 1) { alert("最后一條！請留一點數據吧！"); return; } var tip = confirm("確認刪除？"); if (tip) { tbody.removeChild(this.parentNode.parentNode); } } } }