从零开始构建Table组件：惊艳全场，脱颖而出

2023-05-13 22:38:33

从零构建Table组件：打造数据展示的利器

Table组件的解剖

Table组件是一张电子表格，由三部分组成：

表头（thead）： 包含列名称。
主体（tbody）： 包含数据。
表尾（tfoot）： 包含汇总信息（可选）。

CSS魔法：美化你的Table

使用CSS，你可以给Table组件添加样式，选择你喜欢的颜色、字体和布局。确保Table组件与应用程序的整体风格一致，为用户提供舒适的视觉体验。

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

th, td {
  border: 1px solid black;
  padding: 5px;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tbody tr:hover {
  background-color: #f5f5f5;
}

交互式Table：赋予其生命力

通过添加交互功能，用户可以与Table组件进行交互，增强其实用性。以下是几个常见的选项：

排序： 按特定列对数据进行排序。
筛选： 根据特定条件筛选数据。
分页： 将数据分成更小的块，便于浏览。

// 排序功能
const table = document.getElementById("table");
const headers = table.getElementsByTagName("th");

for (let i = 0; i < headers.length; i++) {
  headers[i].addEventListener("click", function() {
    sortTable(table, i);
  });
}

function sortTable(table, n) {
  const rows = table.getElementsByTagName("tr");
  const sortedRows = Array.from(rows).sort((a, b) => {
    const aValue = a.getElementsByTagName("td")[n].innerHTML;
    const bValue = b.getElementsByTagName("td")[n].innerHTML;
    return aValue < bValue ? -1 : 1;
  });

  sortedRows.forEach((row) => {
    table.appendChild(row);
  });
}