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/

如何使用javascript或jquery对可编辑表进行排序

2 个答案: