改变& lt; tr>bgcolor基于<tr>'s出现在HTML与CSS的计数

Changing <tr> bgcolor based on the count of <tr>'s present in HTML with CSS

本文关键字：tr HTML CSS bgcolor lt 基于 改变      更新时间：2023-09-26

我在HTML页面中使用多个<tr>, bgcolor值如下:

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

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

在HTML中没有类和id。

在不涉及HTML的情况下，我需要在CSS中为所有元素指定背景颜色，并在HTML中指定它们的计数。

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

有可能吗?

1)所有主流浏览器都支持此功能

<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)我们也可以实现使用CSS :nth-child()选择器支持所有主要浏览器，除了IE8和更早的版本。:nth-child()工作示例

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规则:

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

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

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

则可以计算找到的tr的个数:

$("tr").length

则可以遍历tr数组并应用颜色

可以使用jquery Addclass添加类名。将类名添加到表中，并使用该类名获取tr。然后使用jquery css属性$(tr).css('backgroundcolor'，'red');

您可以试试这个，因为您想使用bgcolor而不想触摸HTML(示例):

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

你要求固定的颜色，所以使用以下代替(示例):

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]);
}

确保添加更多的颜色，三种颜色需要三行。如果您允许在多行中使用一种颜色，那么您可以尝试这样做，这样您就不必为每一行添加颜色。

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

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

这都是伪代码，所以可能有语法错误

相关文章：