Вопросы Теги

jQuery: выделите даже столбцы (не строки)

Как к colorize даже (или нечетный) столбцы таблицы с помощью jQuery? (не добавляя классы вручную)

Моя разметка:

<table>
   <caption>Table caption</caption>
   <thead>
   <tr><th scope="col">Table header 1</th><th scope="col">Table header 2</th><th scope="col">Table header 3</th><th scope="col">Table header 3</th></tr>
   </thead>
   <tbody>

        <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr>
        <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr>
        <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr>

        <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr>
   </tbody>
</table>

(это может или не может содержать объем attribs или th теги)

5
задан Adrian 6 July 2010 в 15:03
поделиться

2 ответа

Вы можете использовать :nth-child() селектор для этого:

$('table tr :nth-child(2n)').css('background-color', '#eee');

Вы можете посмотреть демо здесь, эта версия делает столбцы, независимо от того, является ли ячейка или , вы можете добавить это туда (например. например, td:nth-child(2n)), если вы хотите сделать только одно или другое. Если вы хотите выбрать другие столбцы, просто сделайте 2n+1 вместо этого.

6
ответ дан 14 December 2019 в 08:40
поделиться

Редактировать: Обновлено, чтобы исправить мое неправильное прочтение вопроса.

Это должно работать: 

$('tr > :nth-child(even)').css('background-color','#eee');

или 

$('tr > :nth-child(odd)').css('background-color','#eee');
1
ответ дан 14 December 2019 в 08:40
поделиться