Как удалить tr, а затем применить background-color к нечетным tr? - PullRequest
Новая
       9

Как удалить tr, а затем применить background-color к нечетным tr?

0 голосов
/ 01 февраля 2010

на doc.ready, я сделал $("tr:even").css("background-color","orange");. Затем у меня есть кнопка, которая выполняет следующее: $("#tr3).remove(), которая удаляет 3-й tr (я идентифицировал третий tr "tr3"). Затем я применяю оранжевый bgcolor к четным строкам ОПЯТЬ, чтобы обновить tr bgcolors теперь, когда в таблице на 1 меньше tr, но tr bgcolor не обновляется. Я получаю 2 оранжевых буквы подряд, вместо того, чтобы все остальные были оранжевым фоном. имеет смысл?

Ответы [ 4 ]

2 голосов
/ 01 февраля 2010

Было бы проще, если бы вы сделали этот цвет фона классом CSS: 

.odd { background-color: orange; }

Тогда в JavaScript: 

$(function() {
  $("tr:even").addClass("odd");
  $("#button").click(function() {
    $("#tr3").remove();
    $("tr").removeClass("odd").filter(":nth-child(odd)").addClass("odd");
  });
});
1 голос
/ 01 февраля 2010

попробуйте применить также к нечетному: 

$("tr:odd").css("background-color","your color");
$("tr:even").css("background-color","orange");

как мне кажется, потому что, когда вы удаляете 3-й tr, все tr рядом с ним изменяется. нечетное становится четным, а четное становится нечетным.

0 голосов
/ 02 февраля 2010

Все, большое спасибо за вашу помощь !!! В итоге я сделал следующее: 

$(document).ready(function() {
    $("tr:odd").addClass("odd");
    $("#button").click(function () {
        $("#tr3").remove();
        $("tr").removeClass("odd");
        $("tr:odd").addClass("odd"); // re-add class to odd tr's
    });
});

и это сработало! Не нужно было ничего фильтровать (n). Еще раз спасибо за помощь !!!

0 голосов
/ 01 февраля 2010

Вы можете использовать это для доступа к n-му элементу: 

$("tr:nth-child(3n)") //will match with 3rd, 6th, ...

Вы можете изменить 3n или просто добавить и вычесть к нему: 

$("tr:nth-child(3n+1)") //will match with 1st, 4th, 7th, ...
$("tr:nth-child(3n+2)") //will match with 2nd, 5th, 8th, ...

:nth также может использоваться в фильтре, например: 

$(SELECTOR).filter(":nth-child(3n)")

Надеюсь, это то, что вы ищете.

UPDATE:

Перечитав твой вопрос, я понял, что понял неправильно.

В своем коде я поместил код в отдельную функцию: 

function zebra_table($) {
  $("tr").removeClass("odd");
  $("tr:odd").addClass("odd");
}

Затем, после того как я изменю строку таблицы, например удалю одну из нее, или добавлю новую строку, я просто вызову указанную выше функцию: 

jQuery(function($){
  //after DOM loaded, apply zebra
  zebra_table($);

  //...
  //after modify table
  zebra_table($);
});

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

...