如何实现勾选复选框时表格行置顶且刷新后保持状态

需求 #

• 将勾选复选框的表格行移动到表格顶部
• 刷新页面或跳转后，已勾选并置顶的行保持当前位置

现有代码问题 #

你当前的代码仅保存了复选框的勾选状态，但存在两个关键问题：

1. 用索引保存勾选状态，当行的顺序被修改后，索引与实际元素的对应关系会失效，刷新后无法正确匹配
2. 页面加载时仅恢复勾选状态，没有自动将已勾选的行重新移到顶部，无法满足“保持位置”的需求

修正方案 #

我们需要给每行添加唯一标识（如data-id），通过保存勾选行的ID列表来维持状态，同时在页面加载时直接调整行的顺序。

步骤1：给表格行添加唯一标识 #

修改你的HTML表格，为每个<tr>添加data-id属性（值需唯一）：

<table id="emp-table">
  <tbody>
    <tr data-id="emp-1">
      <td><input type="checkbox"></td>
      <td>员工A</td>
    </tr>
    <tr data-id="emp-2">
      <td><input type="checkbox"></td>
      <td>员工B</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

步骤2：修正后的JavaScript代码 #

jQuery(function($) {
  const TABLE_SELECTOR = '#emp-table';
  const STORAGE_KEY = 'checked_employee_rows';

  // 页面加载时恢复勾选状态与行顺序
  function restoreRowState() {
    const checkedRowIds = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
    const $tbody = $(`${TABLE_SELECTOR} tbody`);
    const $allRows = $tbody.find('tr');

    const checkedRows = [];
    const uncheckedRows = [];

    // 分类勾选/未勾选的行
    $allRows.each(function() {
      const $row = $(this);
      const rowId = $row.data('id');
      const $checkbox = $row.find(':checkbox');

      if (checkedRowIds.includes(rowId)) {
        $checkbox.prop('checked', true);
        checkedRows.push($row);
      } else {
        $checkbox.prop('checked', false);
        uncheckedRows.push($row);
      }
    });

    // 重新渲染tbody：勾选行在前，未勾选行在后
    $tbody.empty().append(checkedRows.concat(uncheckedRows));
  }

  // 保存当前勾选的行ID到localStorage
  function saveRowState() {
    const checkedIds = $(`${TABLE_SELECTOR} :checkbox:checked`).map(function() {
      return $(this).closest('tr').data('id');
    }).get();
    localStorage.setItem(STORAGE_KEY, JSON.stringify(checkedIds));
  }

  // 监听复选框变化事件
  $(`${TABLE_SELECTOR} :checkbox`).on('change', function() {
    const $row = $(this).closest('tr');
    const $tbody = $(`${TABLE_SELECTOR} tbody`);

    if (this.checked) {
      // 勾选时移到顶部
      $tbody.prepend($row);
    } else {
      // 取消勾选时移到所有勾选行的后方，保留未勾选行的原有顺序
      const $lastCheckedRow = $tbody.find(':checkbox:checked').last().closest('tr');
      if ($lastCheckedRow.length) {
        $row.insertAfter($lastCheckedRow);
      } else {
        $tbody.append($row);
      }
    }
    // 同步保存状态
    saveRowState();
  });

  // 初始化执行状态恢复
  restoreRowState();
});

关键优化点 #

• 使用行唯一ID替代索引存储状态，避免行顺序变化导致的匹配错误
• 页面加载时直接重组行的顺序，确保勾选行始终在顶部
• 取消勾选时保持未勾选行的原有相对顺序，提升用户体验
• 统一管理存储键名，避免与其他本地存储冲突

内容的提问来源于stack exchange，提问作者user20546006