gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 03:05:08 25 4
gpt4 key购买 nike

我正在尝试打印 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>

最佳答案

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

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

tr:nth-child(even){
background: yellow;
}
tr:nth-child(odd){
background: aliceblue;
}
<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>

关于javascript - 第 1-20 行的表具有交替配色方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47199690/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com