Jquery Move Table Row, но НЕ мимо заголовка

У меня есть строки таблицы, которые перемещаются вверх и вниз, но моя проблема в том, что строки таблицы данных заменяют заголовок таблицы (первую строку).

Я хочу фиксированную первую строку, чтобы при нажатии стрелки вверх вы не перемещали строку вверх, чтобы заменить заголовок.

Я попробовал некоторую условную логику, чтобы проверить, является ли текущая строка первой строкой таблицы, но она не работает.

$(document).ready(function(){

<!--- Move: click to move rows up or down --->
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");

<!-- this var does not work -->
var firstrow = $('table')[0].rows[0]; 

<!-- Check that is not the first row NEEDS FIXED -->
if (row != firstrow){

if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
}
});
});

<table>
<tr>
<td>Do Not Replace Me</td>
<td >&nbsp;</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
</table>

Таблица должна оставаться как есть, и я не могу изменить td на th или что-то в этом роде.

Я надеюсь, что есть способ исправить эти две строки кода.


jquery sorting row move
person User970008    schedule 28.09.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Это было бы, как я полагаю, вы знаете (учитывая ваше заявление об отказе от ответственности, что html должен «оставаться как есть...»), было бы намного проще, если бы вы могли поместить заголовок/первую строку в элемент thead, а остаток в tbody, но один из способов, который работает с html «как есть»:

$(".up,.down").click(function() {
    var row = $(this).parents("tr:first");

    var firstrow = $('table tr:first');

    if ($(this).is(".up") && row.prevAll().length > 1) {
        row.insertBefore(row.prev());
    }
    else if ($(this).is(".down") && row.nextAll().length > 0) {
        row.insertAfter(row.next());
    }
    else {
        return false;
    }
});

демонстрация JS Fiddle.

Между прочим, ваш скрипт мог генерировать ошибки из синтаксиса комментария (хотя я подозреваю, что они были добавлены для нашей пользы, а не в вашем реальном JavaScript):

<!-- comment text -->

является синтаксисом html, и в пределах тегов <script></script> недействителен, чтобы комментировать JavaScript, используйте:

// single-line comment
// which needs to have the double-slash
// preface each comment-line...

or:

/* This is a multi-line
   comment, and this text
   will happily remain commented-out
   until you get to
   one of these comment-close things, just to the right -> */

Использованная литература:

person David says reinstate Monica    schedule 28.09.2011
comment
Да, с теадой было бы проще, но в этом была проблема. Да, комментарии были просто примером. Не был уверен, как блок кода отобразит их. 1-й пост в Stackoverflow. В любом случае спасибо за внимательность и внимательность. - person User970008; 29.09.2011

arrow_upward
1
arrow_downward

Здесь должна помочь функция jQuery index.

$(".up, .down").click(function() {
    // get parent tr
    var $row = $(this).parents('tr:first');
    var $link = $(this);
    // count all tr
    var count = $('table tr').length;
    // if tr isn't the first
    if($row.index() !== 0) {
        // if direction is up and there is a tr above
        if($link.hasClass('up') && $row.index() > 1) {
            $row.insertBefore($row.prev());
        } 
        // if direction is down and there is a tr below
        else if($link.hasClass('down') && $row.index() < count - 1) {
            $row.insertAfter($row.next());
        }
    }
});
person Finbarr    schedule 28.09.2011

arrow_upward
0
arrow_downward

Недавно я столкнулся с аналогичной проблемой, когда мои строки перемещались над строками «заголовка» в моей таблице.

Я решил это, используя вызов базового класса в jquery и назначив класс таблице. Это просто добавляет еще один уровень глубины к спецификации элемента, поэтому он игнорирует строки таблицы, которые не соответствуют требованиям.

Попробуй это:

var row = $(this).parents("tr.MoveableRow:first");

Затем добавьте к каждому тегу class = "MoveableRow".

Ex: <tr class="MoveableRow">

person user2121197    schedule 04.06.2013