javascript - 更改表格中一行的颜色，html

Question

我想用 html 和 css 制作一个表格。但我的问题是我希望表格中的行有两种颜色，一种是橙色，一种是白色……我使用 javascript 来填充表格。但是我不能在第二种情况下更改颜色。使用 Javascript 时我应该使用什么语法来更改行的颜色，因为它会给我一个错误...我的代码如下:

<table>
        <tr>
            <th>Account Type</th>
            <th>Minimun Required</th>
            <th>Rate</th>
            <th>Compounded</th>

        </tr>
                <!--To fill the table with javascript-->
            <script >
                for (var j=0;j<col1.length;j++){
                    if (j%2==0) {
                        document.write("<tr><td>"  + col1[j] + " </td>");
                        document.write("<td>" + col2[j] + "</td>");
                        document.write("<td>" + col3[j] + "</td>");
                        document.write("<td>" + col4[j] + "</td></tr>");
                            }
                    else
                    { 
                document.write("<tr bgcolor="#d9531e"><td>"  + col1[j] + " </td>");
                                document.write("<td>" + col2[j] + "</td>");
                document.write("<td>" + col3[j] + "</td>");
                document.write("<td>" + col4[j] + "</td></tr1>");
                }}

            </script>

        </table>

错误在这一行:

document.write("<tr bgcolor="#d9531e"><td>"  + col1[j] + " </td>");

谢谢!

Answer 1

您正在尝试将双引号嵌套在双引号字符串文字中。您需要将它们转义为 \":

document.write("<tr bgcolor=\"#d9531e\"><td>"  + col1[j] + " </td>");

...或使用单引号:

document.write("<tr bgcolor='#d9531e'><td>"  + col1[j] + " </td>");

(并不是说我推荐使用 document.write()。)

请注意，通常认为使用 CSS 设置颜色是最佳做法。您可以将以下内容添加到您的样式表中:

tr:nth-child(even) {
  background-color: #d9531e;
}

...它会自动为您设置每一行的颜色，如下所示:http://jsfiddle.net/rUK8a/