摘要：接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法，但這次我們需要迭代數(shù)組中的每個對象。對于每個對象，我們可以使用生成單元格。

翻譯：瘋狂的技術宅
原文：https://www.valentinog.com/bl...

本文首發(fā)微信公眾號：jingchengyideng
歡迎關注，每天都給你推送新鮮的前端技術文章

怎樣用原生 JavaScript 生成表格需？本文告訴你答案！

這是一個刷 JavaScript 經(jīng)驗值的好機會：在技術面試中出現(xiàn)的最多的一個問題就是怎樣用原生 API 操作 DOM 。

在下面的教程中，我們將了解如何使用 JavaScript 生成表格，而無需依賴任何庫或框架。

在本教程中，你將學習如何：

用 JavaScript 生成一個表格

用本機 DOM API 來操作表

要學習本教程，你應該對 HTML 和 JavaScript 有基本的了解。

Eloquent JavaScript 是一本非常好的 JavaScript 書籍。這本書很簡潔，也不乏味，同時有大量的練習。以下練習改編自第 14 章，它被稱為“構建表格”。

題目要求你用 JavaScript 構建一個 HTML 表。你的任務是依據(jù) “mountains” 數(shù)組中的數(shù)據(jù)生成表格，將對象中的key對應到列并且每行一個對象。

每個對象都是如下形式：

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

我們有一個名稱，一個高度和一個山峰所在的位置。但 HTML 表格是什么？ HTML 表格是包含表格數(shù)據(jù)的元素，以行和列的形式顯示。這意味著給出以下數(shù)組：

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

我們打算生成下表：

    

    

        
name
        
height
        
place
    
    
    

    

        
Monte Falco
        
1658
        
Parco Foreste Casentinesi
    
    

        
Monte Falterona
        
1654
        
Parco Foreste Casentinesi
    
    

如你所見，該表有一個 thead（表頭），其中包含一個具有三個th（表格標題）的 tr（表格行） 。

然后是tbody（表體） 中包含一堆 tr（表格行）。每個表格行包含一定數(shù)量的 td元素（表格單元格）。

有了這些要求，就可以開始編寫 JavaScript 文件了。我們的起點可以是以下 HTML：

將文件另存為 build-table.html 并繼續(xù)下一部分。

在與 build-table.html 相同的文件夾中創(chuàng)建一個名為 build-table.js 的新文件，并在文件定義數(shù)組：

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

第一個目標是生成表頭。我們知道本機方法 createElement() 會創(chuàng)建傳遞給它的任何元素。假設我們要創(chuàng)建一個表頭，可以用 document.createElement(‘thead’)。不過還有更好的辦法嗎？

讓我們先到 MDN 上查閱一下 element table reference 。你可以看到表格的DOM接口是 HTMLTableElement。

HTMLTableElement 的有趣之處在于它公開的方法中有 createTHead()。沒錯！createTHead 返回與給定表關聯(lián)的表頭元素，更 6 的是，如果表中不存在頭的話，createTHead 會幫我們創(chuàng)建一個。

有了這些知識，接下來在我們的文件中創(chuàng)建一個函數(shù)，將 table 作為參數(shù)。鑒于我們的需求，可以在其中創(chuàng)建一個新的 thead：

function generateTableHead(table) {
  let thead = table.createTHead();
}

現(xiàn)在找到我們的表格（記住在 build-table.html 中有一個）并將其傳給我們的函數(shù)：

function generateTableHead(table) {
  let thead = table.createTHead();
}

let table = document.querySelector("table");
generateTableHead(table);

如果你在瀏覽器中打開 build-table.html，在屏幕上還看不到任何內(nèi)容，不過可以在開發(fā)者工具中看到處理的結果。填充表頭的工作只做了一半，可以看到表頭中填充了一堆 th。每個表頭必須映射到對象描述數(shù)據(jù)組成的 key 上。

信息已經(jīng)存在于數(shù)組 mountains 中的第一個對象內(nèi)部?？梢缘谝粋€對象的 key：

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
    //
];

然后用得到的 key 生成三個表頭。但是要先在 thead 中添加一行！這時候該用 document.createElement(“TR”) 了吧？不不不。HTMLTableRowElement 提供了一個 insertRow() 方法，可以在表頭上調(diào)用。讓我們重構一下 generateTableHead 函數(shù)：

function generateTableHead(table) {
  let thead = table.createTHead();
  let row = thead.insertRow();
}

新行應包含三個 th（表頭），需要手動創(chuàng)建，對于每個 th 元素，我們將附加一個文本節(jié)點。這個函數(shù)可以使用另一個參數(shù)來進行迭代：

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

let table = document.querySelector("table");
let data = Object.keys(mountains[0]);
generateTableHead(table, data);

保存文件并刷新 build-table.html：你應該看到你的表頭中被填充了 name、height 和 place。 有時用 React 和 Vue 偷懶的感覺真好，直接操作 DOM 是多么艱難和繁瑣。不過我們的工作還沒有完成。

接下來該填表了......

為了填充表格可以遵循同樣的方法，但這次我們需要迭代 mountains 數(shù)組中的每個對象。當進入 for…of 循環(huán)時，將為每個項目創(chuàng)建一個新行。

要創(chuàng)建行，你將用到 insertRow()。

但我們不能止步于此。在主循環(huán)內(nèi)部，需要一個內(nèi)循環(huán)，這次要用到 for... in 。內(nèi)部循環(huán)迭代當前對象的每個 key，同時它：

創(chuàng)建一個新單元格

創(chuàng)建一個新的文本節(jié)點

將文本節(jié)點附加到單元格

使用 HTMLTableRowElement 的另一個方法 insertCell() 創(chuàng)建單元格。

也就是說通過以上邏輯可以填充我們的表。打開 build-table.js 并創(chuàng)建一個名為 generateTable 的新函數(shù)。命名可以與我們現(xiàn)有的函數(shù)相同：

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

可以這樣調(diào)用它：

generateTable(table, mountains);

最后來看看完整的代碼：

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

let table = document.querySelector("table");
let data = Object.keys(mountains[0]);
generateTableHead(table, data);
generateTable(table, mountains);

你覺得它能工作嗎？讓我們來試試看：

呃……看起來行被附加到了表頭而不是表體。另外沒有table body！

但是如果切換函數(shù)調(diào)用順序會怎么樣呢？試試吧：

// omitted for brevity

let table = document.querySelector("table");
let data = Object.keys(mountains[0]);
generateTable(table, mountains); // generate the table first
generateTableHead(table, data); // then the head

再次刷新瀏覽器：

好使！另外還得到了一個 tbody。為什么會這樣？當你在空表上調(diào)用 insertRow() 時，這些方法會為自動你創(chuàng)建一個tbody（如果沒有的話）。

做得好！不過我們的代碼可能沒進行很好的組織（有太多的全局綁定），這些將會在下一篇文章中提到。

到此為止，你應該能夠在不依賴任何外部庫的情況下操作HTML表了。恭喜！

在本教程中，我們學到了如何用原生 JavaScript 生成表格。 HTML 表格在DOM中由 HTMLTableElement 體現(xiàn)。這個接口公開了很多有用的方法，其中 createTHead 用于操作表頭，insertRow 用來插入行。

另外 HTML 表格的行繼承自 HTMLTableRowElement。這個接口有兩種方法，其中最重要的是 insertCell。

給定一個對象數(shù)組，可以使用 for…of 循環(huán)來迭代生成行。對于每個對象，我們可以使用 for … in 生成單元格。

我們有一些帶有全局綁定的代碼（請參閱執(zhí)行上下文和調(diào)用堆棧以獲取更多信息）。在下一篇文章中，我們將看到怎樣重構這些代碼。

jQuery正逐漸消失。 Bootstrap將在版本5中刪除它。 原生DOM API 越來越好了，替換以前用 jQuery 做的事情是可行的，沒有（幾乎）任何額外的依賴。

但即使沒有 jQuery 也很容易掉進坑里。有人說你不應該在沒有 $shinyNewLibrary 的情況下去操縱 DOM。實際上每個認真的 JavaScript 開發(fā)人員都應該知道原生 DOM API，以及如何使用 JavaScript 操作 DOM 。這些問題在技術面試中很容易被問到，你不想因此被拒絕吧？

本教程的代碼可在 Github 下載（https://github.com/valentinog...）。

感謝閱讀并敬請期待后續(xù)！

12個令人驚嘆的CSS實驗項目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

從設計者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現(xiàn)動畫效果

程序員30歲前月薪達不到30K，該何去何從

7個開放式的前端面試題

React 教程：快速上手指南