Как отсортировать редактируемую таблицу с помощью javascript или jquery

Question

У меня есть редактируемая таблица, в которой мы можем добавлять, удалять и редактировать строки. Как я могу сортировать их, сохраняя их динамически без базы данных только для статического набора.

Answer 1

Вы можете попробовать плагин, например https://datatables.net/, который может иметь эту и другие функции. Однако вы всегда можете попробовать такой код:

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

Для того, чтобы использовать код выше, вы можете нужно создать conditionFunction. Допустим, вы хотите отсортировать на основе столбца называется идентификатор со всеми его 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/