javascriptまたはjqueryを使用して編集可能なテーブルをソートする方法

Question

私は行を追加、削除、編集できる編集可能なテーブルを持っています。どのように私は静的にだけデータベースを使用せずにそれらを動的に格納して並べ替えることができます

Answer 1

これ以上の機能を持つことができるhttps://datatables.net/のようなプラグインを試すことができます。しかし、あなたは常にこのようないくつかのコードを試みることができる：上記のコードを使用するために

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

を、あなたはconditionFunctionを作成する必要がありますすることができます。これらの条件の機能についての詳細を知るためには、クラスTID

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

を持つすべてのTDタグとIDと呼ばれますが、列に基づいて並べ替えしたいとしましょうhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

を参照してくださいがありますtablesorter jqueryプラグインを使用してテーブルを並べ替えることができます。

デモ：https://jsfiddle.net/Prakash_Thete/q8sh28dh/

<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：ここ

は同じ

HTMLのサンプルコードで

<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/