在現代Web應用程序中,動態生成表格是很常見的任務。使用HTML5,我們可以很方便地使用JSON數據來生成表格。下面,我們將詳細介紹如何使用JSON數據來生成HTML表格。
var json = [ { "name": "張三", "age": 20, "gender": "男" }, { "name": "李四", "age": 22, "gender": "女" }, { "name": "王五", "age": 25, "gender": "男" } ]; var table = document.createElement("table"); var row = table.insertRow(-1); for (var key in json[0]) { var headerCell = document.createElement("th"); headerCell.innerHTML = key.toUpperCase(); row.appendChild(headerCell); } for (var i = 0; i< json.length; i++) { row = table.insertRow(-1); for (var key in json[i]) { var cell = row.insertCell(-1); cell.innerHTML = json[i][key]; } } var dvTable = document.getElementById("dvTable"); dvTable.innerHTML = ""; dvTable.appendChild(table);
上面的代碼簡單地創建了一個JSON數組,在代碼中使用循環生成表頭和表格行。最后,將生成的表格添加到HTML頁面上。循環代碼只需要一個小技巧就可以處理,這里我們就不再贅述。
利用JSON數據來生成HTML表格,可以使我們描述數據更加靈活和方便。我們只需要修改JSON對象中的數據,就可以輕松地修改生成的表格。同時,使用代碼來生成表格也可以最大程度地減少手工操作和減輕代碼維護的負擔。