利用JavaScript實現(xiàn)動態(tài)表格功能實例

更新時間：2026年03月09日 10:58:43 作者：技術喵貓巷

在現(xiàn)代網頁開發(fā)中,表格是展示數(shù)據(jù)的常用元素,無論是數(shù)據(jù)統(tǒng)計、信息展示還是數(shù)據(jù)錄入,表格都能以整齊的格式展示出大量信息,這篇文章主要介紹了利用JavaScript實現(xiàn)動態(tài)表格功能的相關資料,需要的朋友可以參考下

效果速覽

一、核心思路

事件入口：為每個 <th> 綁定點擊，首列是復選框，直接 return
排序函數(shù)：把 NodeList 轉成數(shù)組，利用 sort + localeCompare 處理中文
復選聯(lián)動：全選按鈕用事件冒泡阻止，單行用計數(shù)器實時同步

二、代碼拆解

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.復選聯(lián)動

// 全選
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))
);