当您的行具有内部行时如何交替表格行颜色答案

【问题标题】：How to alternate table row colors when your row has inner rows当您的行具有内部行时如何交替表格行颜色
【发布时间】：2022-11-28 13:09:49
【问题描述】：

我正在尝试在我的网站上为 NBA 现场比分添加备用表格行颜色，但我的表格有点奇怪，因为每个表格行都包含一个内表行，用于给定的比赛季度。我希望每个 team1、scores、quarter 和 team2 组合都具有相同的背景颜色。这是它目前的样子和我的代码：

HTML:

<table>
            <thead>
                <tr>
                    <th class="left" style="width:40%; ">Home</th>
                    <th style="width:10%;" colspan="2">Scores</th>
                    <th class ="right" style="width:40%;">Away</th>
                </tr>
            </thead>

            <tbody id="tableData">
            </tbody>
        </table>

Java脚本：

else{
        data += `<tr>
        <td class="left" rowspan="2"> ${item.team1} <img src=${item.team1Img}></td>
        <td> ${item.score1} </td>
        <td> ${item.score2} </td>
        <td class="right" rowspan="2"> <img src=${item.team2Img}>  ${item.team2}</td>
        </tr>

        <tr>
        <td class="period" colspan="2">Final</td>
        </tr>`;
    }

CSS：

tr:nth-child(3n+0){
background-color: #1b1b1b;
color: #fff;

}

也许我只需要一个不同的第 n 个子公式，不确定它是如何工作的，也无法在网上找到更多高级资源。

提前致谢！

【问题讨论】：

标签： javascript html css html-table

【解决方案1】：

改写我的问题几次后找到答案：tr:nth-child(4n+1), tr:nth-child(4n+2)

这将选择每 2 个表行。

在这里找到答案：nth-child to alternate by 2 rows

【讨论】：