使用纯Javascript根据列类名对表行进行排序

Question

与这个问题非常相似：Sort table rows based on their Class Names - 但需要它使用纯 JavaScript 而不是 JQuery。

它需要能够按类名排序。

考虑下表：

<table>
   <thead>
       <th>Column</th>
   </thead>
   <tbody>
       <tr>
           <td class="High">High</td>
       </tr>
       <tr>
           <td class="Medium">Medium</td>
       </tr>
       <tr>
           <td class="Low">Low</td>
       </tr>
   </tbody>
</table>

函数需要按特定顺序按高、中、低对表格进行排序。

Answer 1

你可以这样做：

• 获取表体的行数
• 根据每行第一列的className对数组进行排序
• 通过加入生成的行元素排序列表的html内容来更新表体的innerHTML

const tableBody = document.getElementById("tableBody");
const rows = tableBody.rows;
const weights = {"Low":0, "Medium":1, "High":2};
 
const sortedRows = [...rows].sort((a,b) =>
  weights[a.children[0].className] - weights[b.children[0].className]
);


tableBody.innerHTML =[...sortedRows].map(row => row.outerHTML).join("");

<table>
   <thead>
       <th>Column</th>
   </thead>
   <tbody id="tableBody">
       <tr>
           <td class="High">High</td>
       </tr>
       <tr>
           <td class="Medium">Medium</td>
       </tr>
       <tr>
           <td class="Low">Low</td>
       </tr>
   </tbody>
</table>