Jquery Move Table Row, но НЕ предыдущий заголовок - PullRequest
Новая
       13

Jquery Move Table Row, но НЕ предыдущий заголовок

2 голосов
/ 29 сентября 2011

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

Мне нужна фиксированная первая строка, чтобы при нажатии кнопки «Вверх»стрелка, вы не перемещаете строку вверх, чтобы заменить заголовок.

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

$(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 или что-то в этом роде.

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

Ответы [ 3 ]

3 голосов
/ 29 сентября 2011

Это, как я полагаю, вам известно (учитывая ваш отказ от ответственности, что 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...

или 

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

Ссылки:

1 голос
/ 29 сентября 2011

Здесь может помочь функция 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());
        }
    }
});
0 голосов
/ 04 июня 2013

Недавно я столкнулся с похожей проблемой, когда мои строки перемещались над строками 'header' в моей таблице.

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

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

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

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

Пример: <tr class="MoveableRow">

...