使用javascript按具有高，中，低值的列對html表進行排序

Question

我正在嘗試使用 javascript 對表格進行排序，但不使用傳統的數字或字母排序方法。 每個表行有 3 個 TD。 第一個是名稱，第二個是級別（高、中、低或空白），第三個也是級別（高、中、低或空白）。 我正在嘗試根據級別值、高、中或低對表格進行排序，並將空的 TD 發送到底部。

我通常使用 PHP，所以在 javascript 方面我有點弱。 我正在嘗試做的基礎知識：

為每個 tr 計算 tr 的數量，排除第一個（因為它的標題）得到第二個 td 的 innerHTML。 比較每個 tds innerHTML 並將它們從高到低排列，將空的放在最后。 如果再次單擊標題反向。

我想我幾乎已經解決了，但是在切換元素順序時我陷入了困境。

<table id="myTable2">
<tr>
   <th>Food/Beverage</th> 
   <th onclick="sortTable(1)">Alkalizing Level</th>
   <th onclick="sortTable(2)">Acidic Level</th>
</tr>
<tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
    <td>Ale (Pale)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
   <td>Alkaline, Ionized Water</td>
    <td>High</td>
   <td></td>
</tr>
<tr>
   <td>Almond Butter</td>
   <td>Medium</td>
   <td></td>
</tr>
<tr>
   <td>Almond Milk (unsweetened)</td>
   <td>Low</td>
   <td></td>
</tr>
<tr>
  <td>Almonds</td>
  <td>Medium</td>
  <td></td>
</tr>
<tr>
  <td>Amaranth Seeds</td>
  <td>Low</td>
  <td></td>
</tr>
<tr>
   <td>Apple Cider Vinegar</td>
   <td></td>
   <td>Low</td>
</tr>
<tr>
  <td>Apple Juice</td>
  <td></td>
  <td>High</td>
</tr>
<tr>
  <td>Apple Pie</td>
  <td></td>
  <td>High</td>
 </tr>
<tr>
  <td>Apples</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots (Dried)</td>
  <td></td>
  <td>High</td>
  </tr>
</table>

JS

<script>
table = document.getElementById("myTable2");    
rows = table.rows;
i = 1;
count = 0;
while(i < rows.length){
alkLevel = rows[i].getElementsByTagName("TD")[1].innerHTML;
alkLevelNext = rows[i+1].getElementsByTagName("TD")[1].innerHTML;
var alkLevelPosition = 0;

i++;
if(alkLevel === "High"){
    alkLevelPosition += 1;

}
if (alkLevel === "Medium"){
    alkLevelPosition += 2;

    }
if(alkLevel === "Low"){
    alkLevelPosition += 3;

   }
if(alkLevel === ""){
    alkLevelPosition += 4;

   }



    if (alkLevelPosition > alkLevelNext) {

      //shouldSwitch = true;

      //break;
    }

 }
</script>

Answer 1

這是一種獲得您正在尋找的表格排序的方法。

向表標題添加了 click 事件偵聽器（而不是內聯onclick方法），然后使用cellIndex確定哪一列控制排序，並包含一個排序函數，可以正確處理高、中、低評分。

每次單擊標題時，所有表格行（標題行除外）都將被刪除、排序，然后以新順序附加（添加了thead和tbody元素以簡化選擇）-此外還有一個指示方向的類sort 被添加到相應的標題元素，以便可以反轉下一個排序。

此外，將 alpha 排序添加到第一個表列作為獎勵（只是為了簡化元素選擇和附加事件偵聽器）。

 const headings = document.querySelectorAll('#myTable th'); const tbody = document.querySelector('#myTable tbody'); const sortRows = (order, i) => { const rows = document.querySelectorAll('#myTable tbody tr'); if (i === 0) { if (order === 'asc') { return Array.from(rows).sort(); } else { return Array.from(rows).sort().reverse(); } } else { return Array.from(rows).sort((a, b) => { const aval = a.cells[i].textContent; const bval = b.cells[i].textContent; let s = 0; if (aval === bval) { s = 0; } else if (aval === 'High') { s = 1; } else if (bval === 'High') { s = -1; } else if (aval === 'Medium') { s = 1; } else if (bval === 'Medium') { s = -1; } else if (aval === 'Low') { s = 1; } else if (bval === 'Low') { s = -1; } if (order === 'desc') { s *= -1; } return s; }); } }; for (const heading of headings) { heading.addEventListener('click', (event) => { const fragment = document.createDocumentFragment(); const elem = event.currentTarget; let order = 'asc'; if (elem.classList.contains('asc')) { order = 'desc'; elem.classList.remove('asc'); elem.classList.add('desc'); } else { elem.classList.remove('desc'); elem.classList.add('asc'); } for (const s of sortRows(order, elem.cellIndex)) { fragment.appendChild(s); } while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } tbody.appendChild(fragment); }); }

 th:hover { cursor: pointer; }

 <table id="myTable"> <thead> <tr> <th>Food/Beverage</th> <th>Alkalizing Level</th> <th>Acidic Level</th> </tr> </thead> <tbody> <tr> <td>Ale (Dark)</td> <td></td> <td>High</td> </tr> <tr> <td>Ale (Pale)</td> <td></td> <td>High</td> </tr> <tr> <td>Alkaline, Ionized Water</td> <td>High</td> <td></td> </tr> <tr> <td>Almond Butter</td> <td>Medium</td> <td></td> </tr> <tr> <td>Almond Milk (unsweetened)</td> <td>Low</td> <td></td> </tr> <tr> <td>Almonds</td> <td>Medium</td> <td></td> </tr> <tr> <td>Amaranth Seeds</td> <td>Low</td> <td></td> </tr> <tr> <td>Apple Cider Vinegar</td> <td></td> <td>Low</td> </tr> <tr> <td>Apple Juice</td> <td></td> <td>High</td> </tr> <tr> <td>Apple Pie</td> <td></td> <td>High</td> </tr> <tr> <td>Apples</td> <td></td> <td>Medium</td> </tr> <tr> <td>Apricots</td> <td></td> <td>Medium</td> </tr> <tr> <td>Apricots (Dried)</td> <td></td> <td>High</td> </tr> </tbody> </table>

Answer 2

所以聽起來您只需要一些幫助與 DOM（文檔對象模型）交互。 看看您所寫的內容，到目前為止看起來不錯，但是您還沒有做任何事情來實際更改標記的呈現順序。

有許多庫可以為您執行此操作，但我建議您自己對 JavaScript 進行一些研究，以了解如何實際操作 DOM（考慮到它是 JavaScript 在瀏覽器中執行的操作的基礎）。 作為提示，我建議將任務分解為瀏覽器需要執行的步驟：

1. 將內存中的行對象（ <tr></tr>之間的所有內容）與 DOM 隔離。
2. 從 DOM 中刪除行對象。
3. 在正確的位置將行對象重新插入 DOM。

W3Schools 的這個鏈接提供了一個很好的例子，說明了如何做到這一點： https : //www.w3schools.com/howto/howto_js_sort_table.asp

他們還有許多教程和內容，可以幫助您更熟練地掌握 HTML 和 JavaScript 以及 CSS（這對於前端內容非常重要）。 祝你好運！ 假如你有任何問題請告知我們！