从0到1，手把手带你解锁table组件的奥秘

2023-11-11 21:02:21

在网页开发的世界里，table 组件可谓是老当益壮，经久不衰。它可以帮助我们轻松构建出整齐有序的数据表格，无论是在办公软件、电子商务平台还是数据可视化场景中，table 组件都发挥着不可替代的作用。今天，就让我们从零开始，一起探寻 table 组件的奥秘。

HTML 结构搭建

首先，让我们从 HTML 结构入手。table 组件由

标签包裹，并在其中包含和标签。标签用于定义表格的表头，通常包含表格的列标题。标签用于定义表格的主体，通常包含表格的数据内容。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

CSS 样式美化

接下来，让我们用 CSS 来美化我们的表格。我们可以通过设置表格的边框、背景颜色、字体样式等属性，让表格看起来更加美观。

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

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

JavaScript 交互增强

最后，我们可以使用 JavaScript 来增强表格的交互性。例如，我们可以实现表格数据的排序、过滤、分页等功能，让表格更加实用。

// 排序
const table = document.querySelector('table');
const ths = table.querySelectorAll('th');

ths.forEach((th) => {
  th.addEventListener('click', () => {
    // 获取列索引
    const index = th.cellIndex;

    // 获取表格数据
    const data = [];
    const trs = table.querySelectorAll('tbody tr');
    trs.forEach((tr) => {
      const tds = tr.querySelectorAll('td');
      data.push(tds[index].textContent);
    });

    // 排序数据
    data.sort((a, b) => a - b);

    // 更新表格数据
    trs.forEach((tr, i) => {
      const tds = tr.querySelectorAll('td');
      tds[index].textContent = data[i];
    });
  });
});

// 过滤
const input = document.querySelector('input');

input.addEventListener('input', () => {
  // 获取过滤值
  const filterValue = input.value.toLowerCase();

  // 过滤表格数据
  const trs = table.querySelectorAll('tbody tr');
  trs.forEach((tr) => {
    const tds = tr.querySelectorAll('td');
    const text = tds[0].textContent.toLowerCase();

    // 如果过滤值不为空，则判断是否包含过滤值
    if (filterValue) {
      tr.style.display = text.includes(filterValue) ? '' : 'none';
    } else {
      tr.style.display = '';
    }
  });
});

// 分页
const currentPage = 1;
const pageSize = 10;

// 获取表格数据
const data = [];
const trs = table.querySelectorAll('tbody tr');
trs.forEach((tr) => {
  const tds = tr.querySelectorAll('td');
  data.push(tds[0].textContent);
});

// 分页显示数据
const pageData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);

// 更新表格数据
trs.forEach((tr, i) => {
  const tds = tr.querySelectorAll('td');
  tds[0].textContent = pageData[i];
});