JavaScript創(chuàng)建表格的方法
更新時間:2020年04月13日 08:39:00 作者:TomHe789
這篇文章主要為大家詳細(xì)介紹了JavaScript創(chuàng)建表格的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript創(chuàng)建表格的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "mountains"></div> <script> let MOUNTAINS = [ {name: "Kilimanjaro", height: 5895, place: "Tanzania"}, {name: "Everest", height: 8848, place: "Nepal"}, {name: "Mount Fuji", height: 3776, place: "Japan"}, {name: "Vaalserberg", height: 323, place: "Netherlands"}, {name: "Denali", height: 6168, place: "United States"}, {name: "Popocatepetl", height: 5465, place: "Mexico"}, {name: "Mont Blanc", height: 4808, place: "Italy/France"} ]; // 創(chuàng)建表格 function buildTable(data) { let table = document.createElement("table"); let tr = document.createElement("tr"); // 通過 for in 循環(huán)遍歷對象,得到對象的屬性,為表頭添加內(nèi)容 for (let i in data[6]) { let th = document.createElement("th"); th.innerText = i; tr.appendChild(th); } table.appendChild(tr); // 通過 forEach 循環(huán)遍歷對象數(shù)組,為表格添加行 data.forEach((value, index) => { let tr = document.createElement("tr"); // 通過 for in 循環(huán)遍歷對象,得到對象的屬性,給每行添加內(nèi)容 for (let index1 in data[index]) { let td = document.createElement("td"); td.innerText = data[index][index1]; tr.appendChild(td); } table.appendChild(tr); }); //設(shè)置表格的對齊屬性,和邊框?qū)傩? table.setAttribute("text-align", "right"); table.setAttribute("border","1"); return table; } document.querySelector("div").appendChild(buildTable(MOUNTAINS)); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript 學(xué)習(xí)筆記(十三)Dom創(chuàng)建表格
- JS封裝的自動創(chuàng)建表格的實現(xiàn)代碼
- 基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)
- Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
- javascript動態(tài)創(chuàng)建表格及添加數(shù)據(jù)實例詳解
- javascript 動態(tài)創(chuàng)建表格的2種方法總結(jié)
- javascript 動態(tài)創(chuàng)建表格
- javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
- js動態(tài)創(chuàng)建表格,刪除行列的小例子
- 解析js原生方法創(chuàng)建表格效率測試
- JavaScript與DOM組合動態(tài)創(chuàng)建表格實例
相關(guān)文章
Postman如何實現(xiàn)參數(shù)化執(zhí)行及斷言處理
這篇文章主要介紹了Postman如何實現(xiàn)參數(shù)化執(zhí)行及斷言處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07js實現(xiàn)為a標(biāo)簽添加事件的方法(使用閉包循環(huán))
這篇文章主要介紹了js實現(xiàn)為a標(biāo)簽添加事件的方法,基于閉包循環(huán)實現(xiàn)事件添加的功能,涉及javascript閉包與事件操作相關(guān)技巧,需要的朋友可以參考下2016-08-08解決ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼問題
這篇文章主要介紹了ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼 ,需要的朋友可以參考下2019-05-05JavaScript中使用stopPropagation函數(shù)停止事件傳播例子
這篇文章主要介紹了JavaScript中使用stopPropagation函數(shù)停止事件傳播例子,即阻止事件冒泡的一個方法,需要的朋友可以參考下2014-08-08js實現(xiàn)鍵盤操作實現(xiàn)div的移動或改變的原理及代碼
實現(xiàn)鍵盤操作實現(xiàn)div的移動,最關(guān)鍵的一點:獲取div對象,下面有個不錯的示例,大家可以參考下2014-06-06