javascript - 使用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

这是一种获取您正在寻找的表格排序的方法。

向表头添加点击事件监听器(而不是内联 onclick 方法)，然后使用 cellIndex 确定哪个列控制排序，并包含一个排序函数妥善处理高分、中分、低分。

每次单击标题时，所有表格行(标题行除外)都会被删除、排序，然后按新顺序追加(添加了 thead 和 tbody 元素以简化选择)- 此外，将指示排序方向的类添加到相应的标题元素，以便可以反转下一个排序。

此外，作为奖励向第一个表格列添加了 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>