Question

我正在尝试打印1-20的表格，并使用Javascript在行中放置红色和绿色的交替配色方案（奇数行有绿色，偶数行有红色）。我还在每行的开头放了一个复选框供以后使用，但不知何故配色方案不起作用。

<body>
    <table border="1">
        <script>
            for(i=1; i<=10; i++)
            {

                if((i%2)==0)
                {
                    document.getElementById('r'+i).style.background="red";
                }
                else
                {
                    document.getElementById('r'+i).style.background="green";
                }
                document.write("<tr id='r"+i+"'>");
                document.write("<td><input type='checkbox' id='c_box'></td>");
                for(j=1; j<=20; j++)
                {
                    document.write("<td>"+i*j+"</td>");
                }
                document.write("</tr>");
            }
        </script>
    </table>
</body>

Answer 1

您可以使用css轻松实现此目的，请参阅下面的示例。将你的表附加到dom并保留此css。

tr:nth-child(even){
  background: yellow;
}
tr:nth-child(odd){
  background: aliceblue;
}

＆＃13;

tr:nth-child(even){
  background: yellow;
}
tr:nth-child(odd){
  background: aliceblue;
}

＆＃13;

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
    <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

＆＃13;

Answer 2

＆＃13;

//Using Javascript

var tr = document.querySelectorAll("tr");
for(var i = 0; i < tr.length; i++){
if(i%2 == 0){
tr[i].style.backgroundColor = '#E74C3C';
}else if(i%2 ==1){
tr[i].style.backgroundColor = "#229954";
}
}

＆＃13;

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
    <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

＆＃13;

Answer 3

您可以通过css更改颜色，因此您尝试做的可能不是正确的方法。但是，代码中的实际问题是您在编写元素之前尝试设置颜色。以下代码将解决您的问题

<body>
    <table border="1">
        <script>
                for(i=1; i<=10; i++)
                {
                    document.write("<tr id='r"+i+"'>");
                    document.write("<td><input type='checkbox' id='c_box'></td>");
                    for(j=1; j<=20; j++)
                    {
                        document.write("<td>"+i*j+"</td>");
                    }
                    document.write("</tr>");


                    if((i%2)==0)
                    {
                        document.getElementById('r'+i).style.background="red";
                    }
                    else
                    {
                        document.getElementById('r'+i).style.background="green";
                    }
                }
        </script>
    </table>
</body>

您需要在更改颜色之前添加控件。 document.getElementById('r'+i)正在尝试查找控件但控件不存在，因此会出错。如果您使用F12并转到控制台选项卡，您将看到类似

的内容

无法读取null
的属性'style'

订单非常重要

1-20的表具有交替配色方案的行

3 个答案: