快捷導(dǎo)航

JavaScript創(chuàng)建表格的方法

更新時(shí)間：2020年04月13日 08:39:00 作者：TomHe789

這篇文章主要為大家詳細(xì)介紹了JavaScript創(chuàng)建表格的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了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");
  // 通過(guò) for in 循環(huán)遍歷對(duì)象,得到對(duì)象的屬性,為表頭添加內(nèi)容
  for (let i in data[6]) {
   let th = document.createElement("th");
   th.innerText = i;
   tr.appendChild(th);
  }
  table.appendChild(tr);
  // 通過(guò) forEach 循環(huán)遍歷對(duì)象數(shù)組,為表格添加行
  data.forEach((value, index) => {
   let tr = document.createElement("tr");
   // 通過(guò) for in 循環(huán)遍歷對(duì)象,得到對(duì)象的屬性,給每行添加內(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è)置表格的對(duì)齊屬性,和邊框?qū)傩?
  table.setAttribute("text-align", "right");
  table.setAttribute("border","1");

  return table;
 }

 document.querySelector("div").appendChild(buildTable(MOUNTAINS));
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uniapp監(jiān)聽(tīng)頁(yè)面滾動(dòng)2種常用方法
在uni-app中,監(jiān)聽(tīng)頁(yè)面滾動(dòng)可以使用onPageScroll生命周期函數(shù)或@scroll事件監(jiān)聽(tīng)器,onPageScroll適用于監(jiān)聽(tīng)整個(gè)頁(yè)面的滾動(dòng)事件,而@scroll事件監(jiān)聽(tīng)器適用于監(jiān)聽(tīng)特定組件如scroll-view的滾動(dòng),這兩種方法的選擇取決于監(jiān)聽(tīng)需求的不同,需要的朋友可以參考下
2024-09-09
細(xì)品javascript 尋址,閉包,對(duì)象模型和相關(guān)問(wèn)題
似乎某些程序員的集合是不相交的，就好像JS程序員和玩編譯原理和CPU指令的匯編程序員就幾乎沒(méi)有交叉。前些日子討論的火熱的“作用域鏈”問(wèn)題，說(shuō)白了就是尋址問(wèn)題，不過(guò)，這個(gè)在C中十分簡(jiǎn)單的問(wèn)題卻被JS這個(gè)動(dòng)態(tài)語(yǔ)言弄得很復(fù)雜。
2009-04-04
JavaScript常用工具函數(shù)匯總（瀏覽器環(huán)境）
這篇文章主要匯總了JavaScript常用的工具函數(shù)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
Bootstrap警告（Alerts）的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap警告（Alerts）的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JS實(shí)現(xiàn)探測(cè)網(wǎng)站鏈接的方法【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)探測(cè)網(wǎng)站鏈接的方法,通過(guò)網(wǎng)站返回錯(cuò)誤響應(yīng)觸發(fā)onerror時(shí)間來(lái)判斷網(wǎng)站鏈接的可用性，非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下
2016-11-11
js移動(dòng)端事件基礎(chǔ)及常用事件庫(kù)詳解
這篇文章主要為大家詳細(xì)介紹了js移動(dòng)端事件基礎(chǔ)及常用事件庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JavaScript中如何調(diào)用Java方法
這篇文章主要介紹了JavaScript中如何調(diào)用Java方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
JavaScript數(shù)組中reduce方法的應(yīng)用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個(gè)值，，所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應(yīng)用，需要的可以參考一下
2023-07-07
javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對(duì)象參數(shù))
由于需要，我要用到setTimeout（）并且在里邊的函數(shù)參數(shù)傳遞一個(gè)參數(shù)，就像這樣setTimeout（"fun(參數(shù))", 1000）。但是以我這種寫法，js會(huì)報(bào)錯(cuò)，說(shuō)‘參數(shù)’未定義。
2010-04-04
JavaScript中的變量聲明早于賦值分析
JavaScript中的變量聲明早于賦值分析，需要的朋友可以參考下
2012-03-03