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元素以简化选择））-另外，将指示排序方向的类添加到相应的标头元素中，以便可以反转下一个排序。

此外，作为奖励，在第一列表中添加了alpha排序（只是为了简化元素选择和附加事件监听器）。

const headings = document.querySelectorAll('#myTable th');
const tbody = document.querySelector('#myTable tbody');

const sortRows = (order, i) => {
  let 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) => {
      let s = 0;
      let aval = a.cells[i].textContent;
      let bval = b.cells[i].textContent;
      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 (let heading of headings) {
  heading.addEventListener('click', (event) => {
    let fragment = document.createDocumentFragment();
    let elem = event.target;
    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');
    }
    let sorted = sortRows(order, elem.cellIndex);
    for (let s of sorted) {
      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在浏览器中的基本作用）。作为提示，我建议将任务分解为浏览器需要执行的步骤：

从DOM中隔离行对象（<tr></tr>之间的所有对象）。
从DOM中删除行对象。
在正确的位置将行对象重新插入DOM。

W3Schools的此链接提供了一个很好的示例，说明了如何做到这一点：https://www.w3schools.com/howto/howto_js_sort_table.asp

他们还提供了许多教程和资料，可帮助您提高HTML和JavaScript以及CSS（对于前端资料的确非常重要）的熟练程度。祝你好运！假如你有任何问题请告知我们！

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

2 个答案: