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

所以听起来您只需要一些帮助来与 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（这对于前端内容非常重要）的熟练程度。祝你好运！假如你有任何问题请告知我们！

Answer 2

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

在表格标题中添加了点击事件侦听器（而不是内联的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>