时间戳

首页 > 解决方案 > 使用javascript按具有高、中、低值的列对html表进行排序

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

问题描述

我正在尝试使用 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>

标签： javascripthtmlsortinghtml-table

解决方案

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

将点击事件侦听器添加到表头（而不是内联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>

推荐阅读