如何使用javascript或jquery對可編輯表進行排序

Question

我有一個可編輯的表，可以在其中添加，刪除和編輯行。 我如何通過靜態存儲而無需數據庫就將它們動態存儲以對其進行排序

Answer 1

您可以嘗試使用https://datatables.net/這樣的插件，該插件可能具有此功能以及更多功能。 但是，您總是可以嘗試這樣的代碼：

var tbl = $("table#yourtblID");
var rows = $("tr", tbl);
rows.sort(conditionFunction);
$("tr", tbl).remove();

為了使用上面的代碼，您可能需要創建一個conditionFunction。 假設您要基於名為id的列進行排序，其所有td標簽的類均為tid

function conditionFunction(a,b){
    return $("td", a).text()-$("td", b).text();
}

要了解有關這些條件函數的更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

有tablesorter jquery插件可用於對表進行排序。

演示： https : //jsfiddle.net/Prakash_Thete/q8sh28dh/

這是相同的示例代碼

HTML：

 <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
</table> 

JS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script> 

$(document).ready(function() {
   $("#myTable").tablesorter(); 
});

有關插件的信息，請訪問http://tablesorter.com/docs/