首页 > 网络编程 > JavaScript > javascript技巧 > JS动态表格

利用JavaScript实现动态表格功能实例

2026-03-09 10:54:50 作者：技术喵猫巷

在现代网页开发中,表格是展示数据的常用元素,无论是数据统计、信息展示还是数据录入,表格都能以整齐的格式展示出大量信息,这篇文章主要介绍了利用JavaScript实现动态表格功能的相关资料,需要的朋友可以参考下

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

效果速览

一、核心思路

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

二、代码拆解

1.元素骨架

<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.排序逻辑

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.复选联动

// 全选
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 触发排序

到此这篇关于利用JavaScript实现动态表格功能的文章就介绍到这了,更多相关JS动态表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！