用jquery改變background-color td

Question

如何用jquery更改背景顏色td？

我需要在第二行，第三行和第四行更改背景顏色列

我的桌子：

<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

你可以在jQuery中使用第n個選擇器：

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 2

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

小提琴

這將得到索引在0到4 => 1,2,3之間的tr

tr:lt(4):gt(0)

Answer 3

我發現：

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

演示： jsfiddle

Answer 4

我會為你關注的tds添加一個類。 這個類的好名字將描述你為什么要突出顯示。 然后你可以在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 for tr看起來像這樣

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

Answer 5

如果要使用此代碼：

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

但是，當然，使用課程會更容易。

小提琴

Answer 6

我不建議將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>