Question

我在HTML页面中使用多个<tr>，其中bgcolor值为：

<tr bgcolor="#000000">
<tr bgcolor="#E5F1CC">
<tr bgcolor="#D30A0A">
<tr bgcolor="#656766">

我需要为所有<tr>提供不同的背景颜色。

HTML中没有使用类或ID。

在不触及HTML的情况下，我需要通过在HTML中指定计数来为CSS中的所有元素提供背景颜色。

，即我想计算HTML中存在的<tr>元素的数量，并为它们提供不同的bgcolors。

有可能吗？

Answer 1

如果您不知道行数，则可以使用类似

的javascript

var trs = document.getElementsByTagName('tr');
for(var i=0; i<trs.length; i++){
    trs[i].style.backgroundColor = "#insertcolor";
}

如果您知道行数，请查看css伪类：

E:nth-child(n){
    background-color: #insertcolor
}

这是所有伪代码，因此可能存在语法错误。

Answer 2

不同行的简单CSS规则：

tr:nth-child(odd) { background-color: #ffffff; }
tr:nth-child(even) { background-color: #000000; }

或者，如果您有多种颜色，则可以采用相同的方式定位特定行：

tr:nth-child(1) { background-color: #123456; }
tr:nth-child(2) { background-color: #654321; }

Answer 3

使用jQuery，您可以在tr标签上使用选择器。

$("tr") or $("tr.specifyAClass")

然后你可以计算找到的tr的数量：

$("tr").length

然后你可以遍历tr的数组并应用一种颜色。

Answer 4

你可以使用jquery Addclass添加类名。将类名添加到表中并使用该类nae获取tr。然后使用jquery css属性，如$（tr）.css（＆＃39; backgroundcolor＆＃39;，＆＃39; red＆＃39;）;

Answer 5

您可以尝试这样做，因为您想使用bgcolor并且不想触及HTML（Example）：

var trs = document.getElementsByTagName('tr'), i = 0, l = trs.length;
for(; i < l; i++)
{
    trs[i].setAttribute('bgcolor', '#' + Math.random().toString(16).substr(-6));
}

您要求使用固定颜色，因此请使用以下代码（Example）：

var colors = ['#ccddee','#123aaa','#fbfb11'];
var trs = document.getElementsByTagName('tr'), i = 0, l = trs.length;
for(; i < l; i++)
{
    trs[i].setAttribute('bgcolor', colors[i]);
}

确保添加更多颜色，三行需要三行颜色。如果您允许多行中的一种颜色，那么您可以try this，因此您不必为每一行添加颜色。

Answer 6

1）所有主流浏览器Working Demo

均支持此功能

<强> HTML

<table>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

<强> CSS

table {
    width:100%;
}
tr {
    height:50px;
    background:#000000;
}
tr + tr {
    background:#E5F1CC;
}
tr + tr + tr {
    background:#D30A0A;
}
tr + tr + tr + tr {
    background:#656766;
}

2）除了IE8和更早版本之外，所有主流浏览器都支持使用CSS :nth-child()选择器。 :nth-child()

的working example

table {
    width:100%;
}
tr {
    height:50px;
    background:#000000;
}
tr:nth-child(2) {
    background:#E5F1CC;
}
tr:nth-child(3) {
    background:#D30A0A;
}
tr:nth-child(4) {
    background:#656766;
}

使用CSS根据HTML中的计数更改bgcolor

6 个答案: