изменить цвет фона td с jquery

Question

Как изменить цвет фона td с помощью jquery?

мне нужно изменить столбец цвет фона один в строке два и три и четыре

мой стол:

<table class="myTable"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
       <tr> 
      <td >td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
       <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
      <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
      <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
    </tbody> 
</table> 

демо: jsfiddle

Как это сделать с JQuery?

Answer 1

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

//Assuming highlighter is your added class name and red is the color you want to change to. 
$('td.highlighter').css('background-color', 'red'); 

Ваш HTML для тр будет выглядеть следующим образом

<tr> 
    <td class='highlighter'>td1</td> 
    <td>td2</td> 
    <td>td3</td> 
    <td>td4</td> 
</tr> 

Answer 2

Вы можете использовать п-й селектор в JQuery:

http://api.jquery.com/nth-child-selector/

$("table tr:nth-child(2) td:nth-child(1)").css("background-color", "blue"); 
$("table tr:nth-child(3) td:nth-child(1)").css("background-color", "blue"); 
$("table tr:nth-child(4) td:nth-child(1)").css("background-color", "blue"); 
$("table tr:nth-child(5) td:nth-child(1)").css("background-color", "blue"); 

jsFiddle

Answer 3

$('.myTable tbody tr:lt(4):gt(0)') 
     .children('td:first-child').css('background-color', 'lightblue'); 

FIDDLE

Это получает tr с индексом между 0 и 4 =>1,2,3

tr:lt(4):gt(0) 

Answer 4

Если бы использовать этот код:

$('.myTable tbody tr').filter(function(i){ 
    return {1 : true, 2 : true, 3 : true}[i]; 
}).children(':first-child').css('background-color', 'red'); 

Но, конечно, было бы легче использовать класс.

Fiddle

Answer 5

Я не предлагаю использовать JQuery для такого рода стиль, потому что это может быть проблема с производительностью, когда прибежал и, если пользователь имеет JavaScript отключен, он не будет отображаться корректно.

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

Найдите пример того, о чем я говорю ниже. http://jsfiddle.net/F7hnL/

CSS

.myTable tr.highlight td:first-child { 
    background-color : red; 
} 

HTML

<table class="myTable"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
     <tr class="highlight"> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
     <tr class="highlight"> 
       <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
      <tr class="highlight"> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
      <tr> 
      <td>td1</td> 
       <td>td2</td> 
       <td>td3</td> 
       <td>td4</td> 
     </tr> 
    </tbody> 
</table> 

Answer 6

я нашел:

$('table.myTable tr:gt(1):lt(3)').find('td:first').css('background-color', 'red');

demo: jsfiddle