Question

我正在尝试使用javascript创建一个交替颜色的表。但是，我遇到了一些麻烦。

我想将标题设置为黑色，并且行交替显示蓝色和灰色。但是，每当我在Web浏览器中运行页面时，标题都是黑色，行仍为白色。虽然用交替颜色显示行，但代码确实可以在JSFiddle上运行。

以下是我用于备用行颜色和JSFiddle

的代码

var tblrows = document.getElementsByTagName('tr');

for(i=0;i<tblrows.length;i++){
    if(i%2==0) tblrows[i].style.backgroundColor = '#0000FF';
    else tblrows[i].style.backgroundColor = '#C0C0C0';
}

Answer 1

编写代码的方式，必须在将所有关联的表行插入DOM后执行。

要实现这一点，您可以将代码包装在之后执行的单独函数中（这正是JS Fiddle独立的脚本框所做的），否则您可以将代码放在script标记中它放在所有文档的HTML内容之后。（如果动态生成表行，则第二种方法可能无效。）

如果您想使用它们，CSS也有奇数和偶数规则，专为您的情况而设计。以下是十一年前关于该主题的规范参考示例（并从那时起更新）：http://www.w3.org/Style/Examples/007/evenodd.en.html

Answer 2

您需要在填充DOM后执行您的js代码。将您的JavaScript代码放在＆lt;表＆gt;你是目标。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>

    <table> <tr> Your table content goes here </tr> </table>

    <script>
        var tblrows = document.getElementsByTagName('tr');
        for(i=0;i<tblrows.length;i++){
            if(i%2==0) tblrows[i].style.backgroundColor = '#0000FF';
            else tblrows[i].style.backgroundColor = '#C0C0C0';} </script>
</body>
</html>

如果您的JavaScript位于单独的文件中，通过将其包含在关闭正文标记之前，您可以确保它在填充DOM之后运行。

...
  <script src="theJavascriptFile.js"></script>
</body>
</html>

交互式颜色未显示在Web浏览器中

2 个答案: