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

我想创建一个HTML表来显示用户状态，它有三个状态“垭口，在过程和失败”，我希望用户可以单击状态，它可以通过状态关于第一排序 - >通，第二 - >失败，第三 - >进行中。而不是由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 和其他网站，我无法找到解决办法，所以我希望有人能帮助我，谢谢

来源

2017-10-19 francoleung

您使用的数据表jQuery库？ –

你可以保持状态的顺序在数组和检查，以切换或者不是他们的阵列中的位置（索引）。我已经改变了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>

来源

2017-10-19 04:38:22 prabushitha

我们取列的所有文字，并将它们保存在一个数组中的行，然后进行排序，并替换表中：

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/

来源

2017-10-19 05:05:58 Nayish

这看起来是按字母排序的..这不是对问题的回答。 – JTeam

谢谢，纠正它！ – Nayish

尝试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>

来源

2017-10-19 05:14:04 JTeam

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

回答

相关问题