Альтернативные цвета строк, когда у вас есть ряд строк

Question

У меня есть этот HTML:

<table class="altRowTable">

<script type="text/javascript">
  $(document).ready(function() {
    $("table.altRow tr:odd").css("background-color", "#DEDFDE");
  });
</script>

Это работает нормально, пока у меня не появятся строки, содержащие rowspan (это не одинаково для всех строк).

Итак, у меня есть что-то вроде этого (ниже "-" обозначает пробел - я не могу на самом деле делать таблицы в SOF :))

|---ID---|---name---|---Number---|   
|---1----|---joe----|-----1------|   
|--------|---tom----|-----2------|   
|---2----|---joe----|-----3------|   
|---3----|---joe----|-----4------|   
|---4----|---joe----|-----6------|   
|---5----|---joe----|-----5------|   
|--------|---tom----|-----3------|   

Как я могу сохранить все строки в пределах строки одинаковым фоновым цветом?

Answer 1

Может быть более изящный способ сделать это, но вот один из способов:

$("table.altRow tr").filter(function() { 
  return $(this).children().length == 3;
}).filter(':even').addClass('alt'​​​​​​);

$("tr.alt td[rowspan]").each(function() {
  $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
});

При этом вместо цвета используется класс CSS, например:

.alt { background-color​: #DEDFDE; }​

Вы можете попробовать здесь , вы можете поменять :even и :odd в первом блоке кода, чтобы выполнить любой шаблон, который вы хотите (в примере :odd не иллюстрирует это хорошо, так какэто строки без rowspan ячеек).

Для этого нужно найти строки с всеми ячейками, а не частичными строками, получаются нечетные или четныеиз тех и применяет класс.Затем второй проход просматривает эти строки, и если у них есть какие-либо rowspan="" ячейки, он получает .rowSpan (свойство DOM), минус единицу для текущей строки, и применяет класс, который на много строк нижечерез .nextAll() и .slice().

Answer 2

Решение, предоставляемое @ nick-craver, не работает для таблиц с ячейками, в которых используются атрибуты colspan как rowspan , так и .Измененный код ниже объясняет это, хотя он предполагает, что общее количество тегов и их значений colspan одинаковы для всех строк.

Спасибо, что указали мне правильное направление, хотя @ nick-craver!

// This the maximum number of columns in your table, E.g. In this case a column crossing the whole table would have colspan="3"

var column_count = 3;

$("table.altRow tr").filter(function() {

  // Adds row children and colspan values of those children

  var child_count = 0;
  $("td", this).each(function(index) {
    if ($(this).attr('colspan') != null) {
      child_count += parseInt($(this).attr('colspan'));
    } else {
      child_count += 1;
    }
  });

  return child_count == column_count;
}).filter(':even').addClass('alt');

$("tr.alt td[rowspan]").each(function() {
  $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
});