Стилизация ячеек данных таблицы на основе четности их строки и столбца с использованием jQuery и CSS

Question

Вот что я хочу сделать:

Стиль таблицы, чей цвет фона ячеек может отличаться от светлого, среднего и темного. Цвет фона любой ячейки зависит от номера ее строки и столбца. Клетки в нечетных строках и нечетных столбцах светлые; ячейки в нечетных строках и четных столбцах ИЛИ четные строки и нечетные столбцы являются средними; ячейки в четных строках и четных столбцах темные.

Вот как я хочу, чтобы это выглядело:

Вот мой алгоритм:

A. For each Row, assign an index;
B. For each Column, assign an index;
C. For each Cell, {
    I. Get the index of this Cell's Row;
    II. Get the index of this Cell's Column;
    III. If (both indices are odd) {add class '.cell-odd-odd';}
    IV. Else If ((parent Row is odd && parent Column is even) ||
                (parent Row is even && parent Column is odd)) {
                    add class '.cell-odd-even';
                }
    V. Else If (both parents are even) {add class '.cell-even-even';}
    VI. Else {do nothing;}
    }

Теперь, как мне это сделать с помощью CSS и JavaScript / jQuery?

РЕДАКТИРОВАТЬ: Возможно, это лучший алгоритм:

A. For each Row, assign an index;
B. For each Column, assign an index;
C. For each Cell, {
    I. Get the index of this Cell's Row;
    II. Get the index of this Cell's Column;
    III. If (parent Row is odd) {
             If (parent Column is odd) {add class '.cell-odd-odd';}
             Else {add class '.cell-odd-even';}
         } Else {
             If (parent Column is odd) {add class '.cell-odd-even';}
             Else {add class '.cell-even-even';}
         }
    }

Answer 1

Попробуйте, хотя поддержка браузера может быть не на уровне 100%:

tr:nth-child(odd) td:nth-child(odd)
{
    background:pink;
}

tr:nth-child(odd) td:nth-child(even)
{
    background:purple;
}

tr:nth-child(even) td:nth-child(odd)
{
    background:purple;
}

tr:nth-child(even) td:nth-child(even)
{
    background:brown;
}

Версия Javascript:

$("tr:odd td:odd").addClass("cell-odd-odd");
$("tr:odd td:even").addClass("cell-odd-even");
$("tr:even td:odd").addClass("cell-even-odd");
$("tr:even td:even").addClass("cell-even-even");

Answer 2

Вы можете использовать селекторы: odd и: even в jQuery для просмотра строк и ячеек вашей таблицы следующим образом:

var cssColorArr = ["#FCE9D8", "#F9D5B2", "#F7C08B"];
$("#yourTableId>tbody>tr:odd").each(function(i, elm){ 
   $(elm).style("background-color", cssColorAttr[0]);
   $(this).find("td:odd").style("background-color", cssColorAttr[1]);
   $(this).find("td:even").style("background-color", cssColorAttr[2]);
});
$("#yourTableId>tbody>tr:even").each(function(i, elm){ 
   $(elm).style("background-color", cssColorAttr[1]);
   $(this).find("td:odd").style("background-color", cssColorAttr[1]);
   $(this).find("td:even").style("background-color", cssColorAttr[2]);
});

Я еще не проверял это, но думаю, вы поняли идею.1004 *

Answer 3

Вот как вы это делаете, используя JQuery

$("td:odd",$("tr:odd")).addClass("cell-odd-odd");
$("td:even",$("tr:odd")).addClass("cell-odd-even");
$("td:odd",$("tr:even")).addClass("cell-odd-even");
$("td:even",$("tr:even")).addClass("cell-even-even");

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

Answer 4

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

---

Забудьте добавлять отдельные классы ячеек в ячейки.Поскольку стиль каждой ячейки зависит от местоположения, вы хотите, чтобы стиль изменился при перемещении td (несмотря на отдельное содержимое и парадигму контейнера ).И этот CSS намного проще и более удобен в обслуживании.

.table-grid .row-odd  .column-odd  {/* light */}
.table-grid .row-odd  .column-even,
.table-grid .row-even .column-odd  {/* medium */}
.table-grid .row-even .column-even {/* dark */}

---

В jQuery вы должны обязательно «перезапускать» подсчет каждый раз, когда попадаете в новую строку,Если бы вы просто использовали $('tr td:odd'), то он создал бы массив, содержащий все нечетные td с в все tr с, которые продолжались бы по строкам.Вам нужно выбрать нечетное td s для каждого tr.

. Способ сделать это - использовать for -loop на объекте-обертке.,Приведенный ниже JS проходит через объект $('tbody') (массив, содержащий tbody s).Затем он создает новый объект jQuery из каждого отдельного tbody, получает его дочерние элементы (tr s) с ограничениями нечетного и четного, а затем добавляет классы к этим tr s.Этот цикл гарантирует, что четность (нечетность и четность) «перезапускается» при каждом tbody.Если у вас есть несколько tbody с (в пределах одного или нескольких table с), первая строка всегда будет иметь одинаковый стиль.

for (var i=0; i<$('.table-grid tbody').size(); i++) {
    var jQobj = $($('.table-grid tbody').toArray()[i]);
    jQobj.children('tr:even').addClass('row-odd');
    jQobj.children('tr:odd').addClass('row-even');
}

Цикл JS ниже делаетто же самое: он выбирает нечетные и четные td s для каждого tr, перезапуская четность в каждой строке.Если у вас несколько строк, первая ячейка всегда выглядит одинаково.

for (var i=0; i<$('.table-grid tr').size(); i++) {
    var jQobj = $($('.table-grid tr').toArray()[i]);
    jQobj.children('td:even').addClass('column-odd');
    jQobj.children('td:odd').addClass('column-even');
}

В сторону: вы, вероятно, задаетесь вопросом: «Почему вы добавляете« нечетные »классы к tr:even и td:even?»Ну, это потому, что селекторы jQuery :even и :odd начинаются с нуля, что означает, что :even выбирает элементы с индексами 0, 2, 4 и т. Д., Что означает первый, третий, пятый и т. Д. Элементы.Если художник CSS хочет, чтобы первый, третий, пятый элементы имели класс, содержащий слово «нечетный» (что разумно, нет?), То программист JS должен переключить его.