Javascript 更改HTML表中特定列的背景色

我想更改HTML表中指定列的背景色。是否可以使用属性来执行此操作。我找到了用行来做这件事的方法

tr.even {
    background-color: white;
}

您可以使用和选择器：

$( "table tr:even" ).css( "background-color", "white" );
$( "table tr:odd" ).css( "background-color", "red" );

element:nth-child(1) {
    background-color:...
}

如果要以列为目标，请使用：

$('table tr > :nth-child(even)').css('background-color','white');
$('table tr > :nth-child(odd)').css('background-color','red');

---

如果您只想使用HTML和css，那么必须分别为每个div提供偶数和奇数类。 然后在css文件中为偶数类和奇数类指定不同的css

<tr class="even"></tr>
<tr class="odd"></tr>
<tr class="even"></tr>


    tr.even {
        background-color: white;
    }

    tr.odd {
        background-color: black;
    }

你的css会是这样的

tr.even {
    background-color: white;
}

tr.odd {
    background-color: black;
}

---

为什么不尝试使用colgroup标记并将其与span属性相结合呢。这样，如果您有3列，例如，您可以这样做

<colgroup>
<col span="2" id="something">
<col id="something2">
</colgroup>

---

如果您希望设置一列而不是一行的背景样式，可以尝试以下方法（如下所示）。您需要更改选择器以匹配HTML

td:first child{背景色：#ccc；}

下面是一个fiddle的链接，以及通过JS添加类的方法。有很多种方法，但由于您处理的是列，请记住CSS应用于要设置样式的每一行中相同的

td

---

对于现代浏览器，您可以使用选择器：

$( "table tr:even" ).css( "background-color", "white" );
$( "table tr:odd" ).css( "background-color", "red" );

element:nth-child(1) {
    background-color:...
}

或者，如果要使用jQuery，请使用：

---

注意：CSS

n个child

选择器是基于1的，而jQuery

eq

选择器是基于0的。

为什么不在列上放置一个id，以便您可以从CSS中更改它？注意：Internet Explorer 8和早期版本不支持：n-child（）选择器或您是正确的@ZIP。这就是为什么我也包括了JS和/或类版本。我同情那些仍然支持IE8的人。。。

element:nth-child(1) {
    background-color:...
}

$(element).eq(0).css("background-color","...");