how to change background-color td with jquery ?

I need to change the background-color column one in row two and three and four

my table :

<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>

demo : jsfiddle

How to do it with jQuery?

how to change background-color td with jquery ?

I need to change the background-color column one in row two and three and four

my table :

<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>

demo : jsfiddle

How to do it with jQuery?

• javascript
• jquery

• 2 $('tr:eq(1), tr:eq(2), tr:eq(3)', '.myTable').find('td:first').css('background', 'red') – adeneo Commented Dec 2, 2013 at 18:58
• possible duplicate of Using jQuery how do I select a range of rows? – mplungjan Commented Dec 2, 2013 at 18:59
• @adeneo Great solution except it doesnt't take into account the first tr within the thead thus highlighting the 1st, 2nd and 3rd cells. Adding a tbody to the selector resolve this. $('tr:eq(1), tr:eq(2), tr:eq(3)', '.myTable tbody').find('td:first').css('background', 'red') – Jonathan Palumbo Commented Dec 2, 2013 at 19:08

6 Answers 6

You can use the nth selector in jQuery:

http://api.jquery./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

I found:

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

demo : jsfiddle

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

FIDDLE

This gets the tr with index between 0 and 4 => 1,2,3

tr:lt(4):gt(0)

I would add a class to the tds you are concerned with. A good name for the class would be something that describes why you are highlighting. Then you could just add a statement in css that will handle that. Or if you want to change the color via jquery you could do the following.

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

Your html for tr would look like this

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

If would use this code :

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

But of course, it would be easier to use class.

Fiddle

I don't suggest using jQuery for this kind of styling because it can be a performance issue when ran and if the user has JavaScript disabled, it won't render properly.

What I suggest is using actual CSS to acplish this task. If it's absolutely necessary to use JS for it, then adding and removing a class from an element would probably be better.

Find an example of what I'm talking about below. http://jsfiddle/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>