Как оформить определенный тд в каждой третьей строке таблицы?

Question

Как оформить определенный тд в каждой третьей строке таблицы?

0

Как выбрать каждый 4td в каждой третьей строке?

У меня есть диаграмма jQgrid и идентификатор, чтобы настроить таргетинг на столбец клиента для каждой третьей строки, начиная с первой.

Вот пример: http://jsfiddle.net/ZHRaD/13/

Основной html:

<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td> // <<
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td> // <<
   <td></td>
</tr>

....

Anon 21 окт. 2013, в 18:09

Источник

Теги:

jquery

html

css

css-tables

jqgrid

4 ответа

2

Использование : nth-child()

$('tr:nth-child(3n+1) td:nth-child(4)').css('color','blue');

обновленный

DEMO

$('tr:nth-child(3n-1) td:nth-child(4)').css('color','blue');

Tushar Gupta 21 окт. 2013, в 14:29

1

@LivingstonStorm см. Рабочую демоверсию jsfiddle.net/cse_tushar/ZHRaD/219
Tushar Gupta - curioustushar 21 окт. 2013, в 15:43

0

$ (tr: eq (2)) оштрафован на 3 строки, если оштрафован 3-й ряд 2-й столбец, тогда $ (tr: eq (2)> td: eq (1))

потому что индекс, начинающийся с 0

Pawan Kumar Tiwari 11 май 2017, в 13:07

0

Добро пожаловать! Я думаю, что ваш ответ должен содержать код. Например, не могли бы вы реализовать свое решение как ответвление jsfiddle, приведенное в вопросе?
friedemann_bach 11 май 2017, в 16:23

0

Это должно сделать трюк, немного css

table tr:nth-child(1) td:nth-child(4), table tr:nth-child(4n+4) td:nth-child(4) {background:green;}

Подумайте, я неправильно понял, также попробуйте

table tr:nth-child(3n+3) td:nth-child(4) {background:green;}

The Humble Rat 21 окт. 2013, в 14:16

Ещё вопросы

@LivingstonStorm см. Рабочую демоверсию jsfiddle.net/cse_tushar/ZHRaD/219
Добро пожаловать! Я думаю, что ваш ответ должен содержать код. Например, не могли бы вы реализовать свое решение как ответвление jsfiddle, приведенное в вопросе?

Oleg · Accepted Answer · 2013-10-21T14-47-00.000Z

Вы можете использовать свойство rows из <table> DOM для доступа к <tr> элементам и свойствам cells <tr> для доступа к элементам <td>. Соответствующий код может выглядеть так:

loadComplete: function () {
    var rows = this.rows, cRows = rows.length, iRow, row,
        iSelRows = 0;
    for (iRow = 0; iRow < cRows; iRow++) {
        row = rows[iRow]; // row.id is the rowid
        if ($(row).hasClass("jqgrow")) {
            // the row is a standard row
            if (iSelRows%4 === 0) {
                $(row.cells[3]).addClass("ui-state-highlight");
            }
            iSelRows++;
        }
    }
}

Соответствующий модифицированный jsfiddle демо здесь.