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

Question

I have an editable table in which we can add, delete and edit rows. How can I sort them by storing them dynamically without a database just for static sake

Answer 1

You could try a plugin like https://datatables.net/ which could have this and more features. However you could always try some code like this:

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

In order to use the above code, you can need to create a conditionFunction. Lets say you would like to sort based on a column called id with all its td tags having the class tid

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

To know more about these condition functions refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

There is tablesorter jquery plugin available for sorting your table.

Demo : https://jsfiddle.net/Prakash_Thete/q8sh28dh/ .

Here is the sample code for the same

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(); 
});

For info on plugin please visit http://tablesorter.com/docs/