跨越分页的原生table勾选实现

前端

2023-10-04 05:37:41

克服原生表格的局限：实现跨页勾选

原生表格的困境

在传统的表格中，选中项往往仅限于当前页面，一旦翻页，所有勾选状态便荡然无存。当需要跨页勾选时，这将造成极大的不便，尤其是在处理海量数据的情况下。

跨页勾选的解决方案

为了解决这一难题，我们可以借助 JavaScript 操作表格中的复选框，同时将勾选状态存储起来。通过 localStorage 或 sessionStorage 的帮助，我们可以跨页访问这些状态。

实现步骤

1. 添加复选框

首先，在表格的每一行中加入复选框，代码如下：

<tr>
  <td><input type="checkbox" name="checkbox" value="row1"></td>
  <td>Row 1</td>
</tr>

2. 添加 JavaScript 代码

接下来，用 JavaScript 处理复选框的点击事件：

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    const value = this.value;
    const storage = localStorage.getItem('checkboxStates');

    if (storage) {
      const states = JSON.parse(storage);
      states[value] = this.checked;
      localStorage.setItem('checkboxStates', JSON.stringify(states));
    } else {
      const states = {};
      states[value] = this.checked;
      localStorage.setItem('checkboxStates', JSON.stringify(states));
    }
  });
});

3. 恢复勾选状态

在翻页后，需要恢复勾选状态，代码如下：

const storage = localStorage.getItem('checkboxStates');

if (storage) {
  const states = JSON.parse(storage);
  checkboxes.forEach(checkbox => {
    const value = checkbox.value;
    if (states[value]) {
      checkbox.checked = true;
    }
  });
}