使用 Javascript 设置备用行的样式 [重复]
Posted
技术标签:
【中文标题】使用 Javascript 设置备用行的样式 [重复]【英文标题】：Styling alternate rows using Javascript [duplicate] 【发布时间】：2018-10-26 03:13:07 【问题描述】：我正在尝试使用 javascript 更改两个表格的交替行的背景颜色。
我可以使用下面的 javascript 来做到这一点，但我确信有一种更有效或更快捷的方式来使用 CSS 选择器选择所需的子元素。有人可以帮忙吗？
window.onload = function()
var elem = document.getElementsByTagName('table')
for (let c = 0; c < elem.length; c++)
var childElem = elem[c].getElementsByTagName('tr');
for (let d = 0; d < childElem.length; d = d + 2)
childElem[d].classList.add('alt');
tr
background-color: #fff;
.alt
background-color: #ccc;
<html>
<body>
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>【问题讨论】：
:nth-child(odd/even) ? 【参考方案1】：你可以用纯CSS和:nth-child实现它：
tr:nth-child(2n)
background-color: #eee;
tr:nth-child(2n + 1)
background-color: #ccc;
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>【讨论】：
这个比用JS好【参考方案2】：在 CSS 中，只需使用：
tr:nth-of-type(odd)
工作示例：
tr:nth-of-type(odd)
background-color: rgb(191, 191, 191);
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>【讨论】：
'tr:nth-of-type(odd)' & 'tr:nth-child(odd)' 工作正常，有什么区别？ 子元素是any子元素。一个类型only 是那个元素类型。这可能导致不同的结果。如果您（例如）：<div><p></p><p></p><ul></ul><p></p><p></p></div> 并声明p:nth-child(odd)，它将选择第一段和最后一段。而如果您声明p:nth-of-type(odd)，它将选择第一段和第三段。出于偏好，我总是使用:nth-of-type，除非我很清楚我想要:nth-child。以上是关于使用 Javascript 设置备用行的样式 [重复]的主要内容，如果未能解决你的问题，请参考以下文章