如何使用JavaScript來顯示數據表格

一、什麼是數據表格

數據表格是一種數據呈現方式，將數據以表格形式展示出來。表格由若干行和列組成，每一個交叉點為一個單元格，可以呈現不同類型的數據，包括文本、數字、日期等。

二、為什麼使用JavaScript來顯示數據表格

JavaScript是一種廣泛應用於Web前端的編程語言，它可以用於操縱HTML文檔和CSS樣式，並給予網頁豐富的交互性。在數據表格的情景下，使用JavaScript可以通過動態生成HTML元素，實現數據的呈現和交互效果的添加。此外，JavaScript框架和庫帶來的便利，也讓數據表格的開發變得更加高效和簡單。

三、數據表格的創建

數據表格的創建過程主要包含HTML結構的構建、CSS樣式的設置和JavaScript項的添加。

1. HTML結構的構建

在HTML中，數據表格通常由

標籤以及其包含的

、

、

子標籤組成。其中

標籤表示表頭，

標籤表示表格主體，

標籤表示表格底部的匯總部分。每一個單元格都由

標籤表示。

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>25</td>
      <td>Female</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

2. CSS樣式的設置

為數據表格添加CSS樣式可以使其更好地區別於頁面其餘部分，增強可讀性。可以通過修改字體、背景色、邊框等屬性進行設置。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: #4CAF50;
  color: white;
}

3. JavaScript項的添加

通過JavaScript，可以動態添加或刪除行列、更改表頭、排序表格等操作，增強表格的交互性。例如，下面的代碼用於為表格設置排序功能。

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchCount ++;
    } else {
      if (switchCount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

四、表格數據的填充

對於靜態的數據表格，可以手動填寫表格每個單元格的數據。

<table>
  <thead>
    <tr>
      <td>欄位1</td>
      <td>欄位2</td>
      <td>欄位3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據1</td>
      <td>數據2</td>
      <td>數據3</td>
    </tr>
    <tr>
      <td>數據4</td>
      <td>數據5</td>
      <td>數據6</td>
    </tr>
  </tbody>
</table>

對於動態的數據表格，我們可以從伺服器端獲取數據，填充至表格中。下面是一個從JSON格式數據中動態生成數據表格的示例代碼。

<table id="myTable"></table>

<script>
var data = [
  {
    "Name": "John",
    "Age": 30,
    "Gender": "Male"
  },
  {
    "Name": "Lucy",
    "Age": 25,
    "Gender": "Female"
  }
];

var table = document.getElementById("myTable");
var tableHTML = "<thead><tr>"
for (var header in data[0]) {
  tableHTML += "<th>" + header + "</th>";
}
tableHTML += "</tr></thead><tbody>";
for (var i = 0; i < data.length; i++) {
  tableHTML += "<tr>"
  for (var header in data[i]) {
    tableHTML += "<td>" + data[i][header] + "</td>";
  }
  tableHTML += "</tr>"
}
tableHTML += "</tbody>"
table.innerHTML = tableHTML;
</script>

五、總結

本文介紹了如何使用JavaScript來顯示數據表格，我們從數據表格的定義、JS在數據表格中的優勢、數據表格的創建過程、表格數據的填充等多個角度進行了闡述。通過學習相關知識，我們可以更好地掌握數據表格的開發技巧，提高Web前端開發的水平。

標籤表示，每一行由