html表格交替行颜色设置

Question

<table>
            <caption>
                The cities I visited on my segway'n USA travels.
            </caption>
            <tr>
                <th>City</th>
                <th>Date</th>
                <th>Temperature</th>
                <th>Altitude</th>
                <th>Population</th>
                <th>Diner Rating</th>
            </tr>
            <tr>
                <td class="center">Walla Walla,WA</td>
                <td class="center">June 15th</td>
                <td class="center">75</td>
                <td class="right">1,204 ft</td>
                <td class="right">29,686</td>
                <td class="center">4/5</td>
            </tr>
            <tr>
                <td class="center">Magic City,ID</td>
                <td class="center">June 25th</td>
                <td class="center">74</td>
                <td class="right">5,312 ft</td>
                <td class="right">50</td>
                <td class="center">3/5</td>
            </tr>
            <tr>
                <td class="center">Bountiful,UT</td>
                <td class="center">July 10th</td>
                <td class="center">91</td>
                <td class="right">4,226 ft</td>
                <td class="right">41,173</td>
                <td class="center">4/5</td>
            </tr>
            <tr>
                <td class="center">Last Chance,CO</td>
                <td class="center">July 23rd</td>
                <td class="center">102</td>
                <td class="right">4,780 ft</td>
                <td class="right">265</td>
                <td class="center">3/5</td>
            </tr>
            <tr>
                <td class="center" rowspan="2">Truth or Consequences,NM</td>
                <td class="center">August 9th</td>
                <td class="center">93</td>
                <td class="right" rowspan="2">4,242 ft</td>
                <td class="right" rowspan="2">7,289</td>
                <td class="center">5/5</td>
            </tr>
           <tr><!--插入新行-->
                <td class="center">August 27th</td>
                <td class="center">98</td>
                <td class="center">4/5</td>
            </tr>
            <tr>
                <td class="center">Why,AZ</td>
                <td class="center">August 18th</td>
                <td class="center">104</td>
                <td class="right">860 ft</td>
                <td class="right">480</td>
                <td class="center">3/5</td>
            </tr>
        </table>

td,th{
    border:thin dotted gray;
    padding: 5px;
}
table{
    border: thin solid black;
    margin: 0px 20px 0px 20px;
    caption-side: bottom;
    border-collapse: collapse;
}
caption{
    font-style: italic;
    padding-top: 8px;
}
td.center{
    text-align: center;
}
td.right{
    text-align: right;
}

tr:nth-child(odd){
    background-color: #fcba7a;
}
th{
    background-color: #cc6600;
}

HTML建立表格后，设置奇数行为橙色，在插入合并行后显示不正确，是我哪里处理不当吗？

Answer 1

【以下回答由 GPT 生成】

要使用JavaScript代码为交替行设置颜色，可以通过遍历表格的行，根据行的索引来确定交替行的背景颜色。下面是一个示例的JavaScript代码：

// 获取表格
var table = document.querySelector("table");

// 获取表格的所有行
var rows = table.getElementsByTagName("tr");

// 遍历表格的行，从索引为1的行开始（跳过表头）
for (var i = 1; i < rows.length; i++) {
    // 如果行的索引是偶数，则设置背景颜色为灰色，否则设置为白色
    if (i % 2 === 0) {
        rows[i].style.backgroundColor = "gray";
    } else {
        rows[i].style.backgroundColor = "white";
    }
}

这段代码首先获取了表格元素，然后使用getElementsByTagName方法获取了表格的所有行。接下来，使用一个for循环遍历每一行，从索引为1的行开始（跳过表头）。在循环内部，使用行的索引判断行的奇偶性，并设置相应的背景颜色。

你可以将这段代码放在HTML文件的<script>标签内，或者将其保存为一个单独的.js文件并在HTML文件中引用。这样，当页面加载时，JavaScript代码将自动应用于表格，为交替行设置颜色。

请注意，这只是其中一种实现方式，你也可以根据具体的需求和样式要求进行调整。

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/1006349
• 这篇博客你也可以参考下：什么是HTML语义化标签？常见HTML语义化标签大全
• 除此之外, 这篇博客: 初学html，建立属于一个自己的网页中的 自定义列表： 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^