回到基礎：如何用原生 DOM API 生成表格

時間 2019-11-15

標籤回到基礎如何原生 dom api 生成表格欄目 HTML 简体版

原文原文鏈接

翻譯：瘋狂的技術宅javascript

原文：https://www.valentinog.com/blog/html-table/html

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

這是一個刷 JavaScript 經驗值的好機會：在技術面試中出現的最多的一個問題就是**怎樣用原生 API 操做 DOM **。java

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

你將學到些什麼

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

用 JavaScript 生成一個表格
用本機 DOM API 來操做表

要求

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

需求

Eloquent JavaScript 是一本很是好的 JavaScript 書籍。這本書很簡潔，也不乏味，同時有大量的練習。如下練習改編自第 14 章，它被稱爲「構建表格」。json

題目要求你用 JavaScript 構建一個 HTML 表。你的任務是依據「mountains」數組中的數據生成表格，將對象中的key對應到列而且每行一個對象。bootstrap

每一個對象都是以下形式：數組

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }
複製代碼

咱們有一個名稱，一個高度和一個山峯所在的位置。但 HTML 表格是什麼？ HTML 表格是包含表格數據的元素，以行和列的形式顯示。這意味着給出如下數組：

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

咱們打算生成下表：

<table>
    <thead>
    <tr>
        <th>name</th>
        <th>height</th>
        <th>place</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Monte Falco</td>
        <td>1658</td>
        <td>Parco Foreste Casentinesi</td>
    </tr>
    <tr>
        <td>Monte Falterona</td>
        <td>1654</td>
        <td>Parco Foreste Casentinesi</td>
    </tr>
    </tbody>
</table>
複製代碼

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

而後是tbody（表體） 中包含一堆 tr（表格行）。每一個表格行包含必定數量的 td元素（表格單元格）。

有了這些要求，就能夠開始編寫 JavaScript 文件了。咱們的起點能夠是如下 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a table</title>
</head>
<body>
<table>
<!-- here goes our data! -->
</table>
</body>
<script src="build-table.js"></script>
</html>
複製代碼

將文件另存爲 **build-table.html ** 並繼續下一部分。

生成表頭

在與 build-table.html 相同的文件夾中建立一個名爲 build-table.js 的新文件，並在文件定義數組：

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() 會建立傳遞給它的任何元素。假設咱們要建立一個表頭，能夠用 document.createElement(‘thead’)。不過還有更好的辦法嗎？

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

HTMLTableElement 的有趣之處在於它公開的方法中有 createTHead()。沒錯！createTHead 返回與給定表關聯的表頭元素，更 6 的是，若是表中不存在頭的話，createTHead 會幫咱們建立一個。

有了這些知識，接下來在咱們的文件中建立一個函數，將 table 做爲參數。鑑於咱們的需求，能夠在其中建立一個新的 thead：

function generateTableHead(table) {
  let thead = table.createTHead();
}
複製代碼

如今找到咱們的表格（記住在 build-table.html 中有一個）並將其傳給咱們的函數：

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

let table = document.querySelector("table");
generateTableHead(table);
複製代碼

若是你在瀏覽器中打開 build-table.html，在屏幕上還看不到任何內容，不過能夠在開發者工具中看處處理的結果。填充表頭的工做只作了一半，能夠看到表頭中填充了一堆 th。每一個表頭必須映射到對象描述數據組成的 key 上。

信息已經存在於數組 mountains 中的第一個對象內部。能夠迭代第一個對象的 key：

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

而後用獲得的 key 生成三個表頭。可是要先在 thead 中添加一行！這時候該用 document.createElement(「TR」) 了吧？不不不。HTMLTableRowElement 提供了一個 insertRow() 方法，能夠在表頭上調用。讓咱們重構一下 generateTableHead 函數：

function generateTableHead(table) {
  let thead = table.createTHead();
  let row = thead.insertRow();
}
複製代碼

新行應包含三個 th（表頭），須要手動建立，對於每一個 th 元素，咱們將附加一個文本節點。這個函數可使用另外一個參數來進行迭代：

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 數組中的每一個對象。當進入 for…of 循環時，將爲每一個項目建立一個新行。

要建立行，你將用到 insertRow()。

但咱們不能止步於此。在主循環內部，須要一個內循環，此次要用到 **for... in **。內部循環迭代當前對象的每一個 key，同時它：

建立一個新單元格
建立一個新的文本節點
將文本節點附加到單元格

使用 HTMLTableRowElement 的另外一個方法 insertCell() 建立單元格。

也就是說經過以上邏輯能夠填充咱們的表。打開 build-table.js 並建立一個名爲 generateTable 的新函數。命名能夠與咱們現有的函數相同：

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);
    }
  }
}
複製代碼

能夠這樣調用它：

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！

可是若是切換函數調用順序會怎麼樣呢？試試吧：

// 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。爲何會這樣？當你在空表上調用 insertRow() 時，這些方法會爲自動你建立一個tbody（若是沒有的話）。

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

到此爲止，你應該可以在不依賴任何外部庫的狀況下操做HTML表了。恭喜！

總結

在本教程中，咱們學到了如何用原生 JavaScript 生成表格。 HTML 表格在DOM中由 HTMLTableElement 體現。這個接口公開了不少有用的方法，其中 createTHead 用於操做表頭，insertRow 用來插入行。

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

給定一個對象數組，可使用 for…of 循環來迭代生成行。對於每一個對象，咱們可使用 for … in 生成單元格。

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

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

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

本教程的代碼可在 Github 下載（https://github.com/valentinogagliardi/back-to-js-basics）。

感謝閱讀並敬請期待後續！

歡迎關注京程一燈公衆號：jingchengyideng，獲取更多前端乾貨。