JS 打造动态表格

前端小巷子2025-09-09 8:44

后台列表页最常见的需求：点击表头排序 + 一键全选。本文用原生js代码实现零依赖方案，涵盖 DOM 查询、排序算法、事件代理三大核心技能。

效果速览

一、核心思路

事件入口：为每个 <th> 绑定点击，首列是复选框，直接 return
排序函数：把 NodeList 转成数组，利用 sort + localeCompare 处理中文
复选联动：全选按钮用事件冒泡阻止，单行用计数器实时同步

二、代码拆解

1.元素骨架

html 复制代码

<table class="table-container" width="400">
     <thead>
         <tr>
             <th>
                 <input class="checkAll" type="checkbox">
             </th>
             <th>编号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>职位</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>
                 <input type="checkbox">
             </td>
             <td>3</td>
             <td>王同学</td>
             <td>24</td>
             <td>C++程序员</td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox">
             </td>
             <td>5</td>
             <td>张同学</td>
             <td>24</td>
             <td>WEB前端</td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox">
             </td>
             <td>22</td>
             <td>玛丽</td>
             <td>30</td>
             <td>测试员</td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox">
             </td>
             <td>6</td>
             <td>艾伦</td>
             <td>21</td>
             <td>交互设计师</td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox">
             </td>
             <td>17</td>
             <td>小明同学</td>
             <td>28</td>
             <td>PHP工程师</td>
         </tr>

     </tbody>
 </table>

2.排序逻辑

js 复制代码

const arr = Array.prototype.slice.call(rows).sort((a, b) => {
  const textA = a.cells[index].innerText;
  const textB = b.cells[index].innerText;
  return index === 2 || index === 4
    ? textA.localeCompare(textB, 'zh')
    : Number(textA) - Number(textB);
});
arr.forEach(tr => tbody.appendChild(tr)); // DOM 移动，无需删除再插入

3.复选联动

js 复制代码

// 全选
checkAll.onclick = e => {
  e.stopPropagation();
  checkOneList.forEach(cb => cb.checked = checkAll.checked);
};

// 单行
checkOneList.forEach(cb =>
  cb.onclick = () =>
    (checkAll.checked =
      Array.from(checkOneList).every(c => c.checked))
);

三、边界与扩展

排序状态记忆：给 <th> 加 data-order 实现升降切换
多选过滤：把排序结果同步给 filter 即可实现搜索 + 排序
键盘支持：keydown 监听 Enter 或 Space 触发排序