Javascript 使用jquery更改背景色td

如何使用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>

第1列
第2列
第3列
第4列
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4

演示：

---

如何使用jQuery实现它？

我将向您关心的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');

您的tr html如下所示

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

td1
td2
td3
td4

您可以在jQuery中使用第n个选择器：

这将获取索引介于

0

和

4

=>

1,2,3

tr:lt(4):gt(0)

---

如果您将使用此代码：

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

当然，使用类会更容易

---

我不建议使用jQuery进行此类样式设置，因为在运行时可能会出现性能问题，如果用户禁用了JavaScript，则无法正确呈现

我建议使用实际的CSS来完成这项任务。如果绝对有必要使用JS，那么从元素中添加和删除类可能会更好

找一个我在下面谈论的例子。

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>

第1列
第2列
第3列
第4列
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4
td1
td2
td3
td4

我发现：

$（'table.myTable tr:gt（1）：lt（3）'）.find（'td:first'）.css（'background-color'，'red'）

演示：
$（'tr:eq（1），tr:eq（2），tr:eq（3）'，.myTable'）。查找（'td:first'）。css（'background'，'red'）
可能与@adeneo Great solution重复，除非它没有考虑
thead
中的第一个
tr
，从而突出显示第一、第二和第三个单元格。将
t车身
添加到选择器可解决此问题<代码>$（'tr:eq（1），tr:eq（2），tr:eq（3）'，.myTable tbody'）。查找（'td:first'）。css（'background'，'red'）

为什么不使用gt0:lt4？更自然的秩序，不是吗？@mplungjan

gt0:lt3

是的，我只是觉得有时候很奇怪

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

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