Question

我想创建一个html表来显示用户状态，它有三个状态“Pass，In process and Fail”，我希望用户可以点击Status，它可以按状态排序第一个 - ＆gt;通过，第二 - ＆gt;失败，第三 - ＆gt;正在进行中。而不是A到Z的顺序。谢谢这是我的HTML代码，

<table border="1"> 
  <th>Name</th>
  <th>Status</th>
<tr>
  <td>Peter</td>
  <td>Pass</td>
</tr>
<tr>
  <td>Billy</td>
  <td>In process</td>
</tr>
<tr>
  <td>Andy</td>
  <td>Fail</td>
</tr>
 <tr>
  <td>Tom</td>
  <td>In process</td>
</tr>   
<tr>
  <td>Mary</td>
  <td>Pass</td>
</tr>

以下是我希望最终的输出结果

但我在w3school找到了解决方案 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table 和其他网站，我找不到解决方案，所以我希望有人可以帮助我，谢谢

Answer 1

您可以将状态的顺序保持在数组中，并检查数组中它们的位置（索引）以便切换。我已经改变了w3school代码。

<!DOCTYPE html>
<html>
<title>Sort a HTML Table Alphabetically</title>
<body>
Click on Status cell to Sort
<table border="1" id="myTable"> 
  <th>Name</th>
  <th onclick="sortTable()">Status</th>
<tr>
  <td>Peter</td>
  <td>Pass</td>
</tr>
<tr>
  <td>Billy</td>
  <td>In process</td>
</tr>
<tr>
  <td>Andy</td>
  <td>Fail</td>
</tr>
 <tr>
  <td>Tom</td>
  <td>In process</td>
</tr>   
<tr>
  <td>Mary</td>
  <td>Pass</td>
</tr>   
</table>

<script>
function sortTable() {
  var orderStatus = ["pass","fail", "in process"];
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[1];
      y = rows[i + 1].getElementsByTagName("TD")[1];
      //check if the two rows should switch place:
      if (orderStatus.indexOf(x.innerHTML.toLowerCase()) > orderStatus.indexOf(y.innerHTML.toLowerCase())) {
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

Answer 2

我们获取列的所有文本并将其与行中的行一起保存，然后在表中进行排序和替换：

function sortTable() {
  var orderStatus = ["Pass","Fail", "In process"];
  var array = []
  $('tr:not(:first)').each((index, child) => {
    array.push({text: $(child).find('td:nth-child(2)').text(), element: child});
  });


  array.sort((a,b) => orderStatus.indexOf(a.text) > orderStatus.indexOf(b.text));

  $('tr:not(:first)').remove();
    array.forEach((a) => {
      $('table').append(a.element);
    });
}

示例可以在这里看到：https://jsfiddle.net/8oru7ahp/2/

Answer 3

试试here

<!DOCTYPE html>
<html>
<title>Sort a HTML Table Alphabetically</title>
<body>

<p>Click the button to sort the table alphabetically, by name:</p>
<p><button onclick="sortTable()">Sort</button></p>

<table border="1" id="myTable">
  <th>Name</th>
  <th onclick="sortTable()">Status</th>
<tr>
  <td>Peter</td>
  <td>Pass</td>
</tr>
<tr>
  <td>Billy</td>
  <td>In process</td>
</tr>
<tr>
  <td>Andy</td>
  <td>Fail</td>
</tr>
 <tr>
  <td>Tom</td>
  <td>In process</td>
</tr>   
<tr>
  <td>Mary</td>
  <td>Pass</td>
</tr>   
</table>

<script>
function sortTable() {
  var table, rows, pass, fail, inProgress;
  table = document.getElementById("myTable");


  pass = []
  fail = []
  inProgress = []

  rows = table.rows
  /*Loop through all table rows*/
  for (i = 1; i < (rows.length); i++) {
    var x = rows[i].getElementsByTagName("TD")[1];
    if (x.innerHTML.toLowerCase() == "pass") {
      pass.push(rows[i])
    }
    if (x.innerHTML.toLowerCase() == "fail") {
      fail.push(rows[i])
    }
    if (x.innerHTML.toLowerCase() == "in process") {
      inProgress.push(rows[i])
    }
    }

    for (i = 0; i < (pass.length); i++) {
    table.appendChild(pass[i])
    }
        for (i = 0; i < (fail.length); i++) {
    table.appendChild(fail[i])
    }
        for (i = 0; i < (inProgress.length); i++) {
    table.appendChild(inProgress[i])
    }

}
</script>

</body>
</html>

如何按数据表中的自定义字段排序？

3 个答案: