淺談資料的表格化

在HTML5中，table模組是網頁中常見的頁面元素，在網頁中不僅顯示資料，還用來控制網頁佈局，精準的控制文字以達到我們的目的。

是我們最常使用的製作表格的標籤，運用table模組，可以快速生成一個簡單資料表格的基本樣子，無需過多寫js，專注於HTML的表頭部分即可

當我們用瀏覽器檢視錶格時，靜態化的表格，無法賦予其動態元素，這時我們可以轉換思路，將表格動態化，這兒說的就是使資料表格化，利用JS方法。 什麼叫做資料的表格化？form + table Dom 資料的表格化，用JS方法配置完成對錶格的渲染，這樣的好處是不需要寫過多的重複的html程式碼，在javascript中制定原始元素，設定各項引數較為簡潔

在body中設定一個class="container"的盒子，盒子中設定row col 我們引用bootstrap中table-striped的樣式 對錶格的css進行處理標籤中的class 改為“ table table-striped ”兩行之前有不同的顏色（“斑馬線”）

我們來寫js方法，來達到我們資料表格化的目的。 在script中定義我們的元素，用let設定一個陣列，設定我們表格要插入的資料，如下所示

var 與 let let 支援塊級作用域 { } let 變數不會汙染window var 時代沒有const es5 es6時才有const 可以window. 掛在全域性上 接著我們要實現的功能是表格的制定和表格資料的顯示，定義兩個函式，我們在學js這門語言的時候，是根據功能去解決問題去寫語句，而不是為了語句而寫功能。函式1 生成表頭，要建立一個表頭，可以用 document.createElement(‘thead’) 建立一個函式，將 table 作為引數。鑑於我們的需求，可以在其中建立一個新的 thead：

執行結果

我們在寫DOM時的寫法也有些小小的改變，更加簡潔些，加深對DOM的理解。之前的寫法 const table =document.createElementTextNode('table')=>let thead=table.createTHead()；利用原生JavaScript API生成表格，使資料表格化。