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

<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>

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 移动，无需删除再插入

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