JQuery - сортировка таблицы после добавления строки к ней

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

Плагины jQuery, такие как tablesorter, являются полным избытком для того, что я хочу сделать. Есть ли простой способ сортировки таблицы?

Изменить: Fiddle

ОТВЕТЫ

Ответ 1

Здесь у вас есть простой сортировщик таблиц с скриптом здесь:

HTML

<table id="sort-table">
    <tbody>
        <tr><td>he</td></tr>
        <tr><td>stackoverflow</td></tr>
        <tr><td>by</td></tr>
        <tr><td>vote</td></tr>
        <tr><td>post</td></tr>
        <tr><td>And</td></tr>
        <tr><td>clicking</td></tr>
        <tr><td>up</td></tr>
        <tr><td>did</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>

JQuery

$('.sort-table').click(function(e) {
    e.preventDefault();                    // prevent default behaviour

    var sortAsc = $(this).hasClass('asc'), // ASC or DESC sorting
        $table  = $('#sort-table'),        // cache the target table DOM element
        $rows   = $('tbody > tr', $table); // cache rows from target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;  // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;  // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                  // append rows after sort
    });
});

Ответ 2

У меня недостаточно репутации, чтобы комментировать ответ Зууля, но он не всегда работает. Проверьте эту скрипту:

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="sort-table">
    <tbody>
<tr><td>Text 2003-01-27.pdf</td></tr>
<tr><td>Text 2004-03-23.pdf</td></tr>
<tr><td>Text 2004-04-01.pdf</td></tr>
<tr><td>Text 2004-12-31.pdf</td></tr>
<tr><td>Text 2010-04-14.pdf</td></tr>
<tr><td>Text 2011-02-07.pdf</td></tr>
<tr><td>Medic 2004-08-24.pdf</td></tr>
<tr><td>Bank 2009-10-06.pdf</td></tr>
<tr><td>Family 2010-10-19.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2004-06-30.pdf</td></tr>
<tr><td>Statement 2010-03-31.pdf</td></tr>
<tr><td>Next.pdf</td></tr>
<tr><td>School 2002-03-04.pdf</td></tr>
<tr><td>School 2003-06-23.pdf</td></tr>
<tr><td>School 2010-06-10.pdf</td></tr>
<tr><td>Deal 2002-03-04.pdf</td></tr>
<tr><td>Deal 2002-06-03.pdf</td></tr>
<tr><td>Deal 2003-06-03.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2007-03-26.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2008-03-19.pdf</td></tr>
<tr><td>Vacation 2009-03-23.pdf</td></tr>
<tr><td>Vacation 2012-09-21.pdf</td></tr>
<tr><td>Vacation 2012-09-17.pdf</td></tr>
<tr><td>Vacation 2014-09-25.pdf</td></tr>
<tr><td>Vacation 2014-10-23.pdf</td></tr>
<tr><td>Work 2004-06-21.pdf</td></tr>
<tr><td>Work 2009-09-09.pdf</td></tr>
<tr><td>Work 2010-05-01.pdf</td></tr>
<tr><td>AGR 2002-03-05.pdf</td></tr>
<tr><td>AGR 2004-10-28.pdf</td></tr>
<tr><td>AGR 2005-11-22.pdf</td></tr>
<tr><td>AGR 2011-01-20.pdf</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>