我想要样式odd
和even
tr
元素与我的表格不同。
这是我的代码:
/*
Create a one-liner code to add the class ‘odd’ to an odd number row and the class ‘even’ to an even number row
Hint: Use the nth-child selector and the end() function
*/
table,
tr,
td {
border-collapse: collapse;
border: 1px solid #000;
}
table {
width: 100%;
}
tr.odd {
background: rgba(0, 255, 0, 0.1);
}
tr.even {
background: rgba(0, 0, 0, 0.1);
}
<table>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
</table>
提示:使用第 n 个子级选择器和 end() 函数
最佳答案
如果你有jQuery,你可以使用:odd
和 :even
选择器
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
table,
tr,
td {
border-collapse: collapse;
border: 1px solid #000;
}
table {
width: 100%;
}
tr.odd {
background: rgba(0, 255, 0, 0.1);
}
tr.even {
background: rgba(0, 0, 0, 0.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
</table>
仅使用 CSS
您还可以使用 CSS nth-child
选择器选择奇数和偶数元素。
table,
tr,
td {
border-collapse: collapse;
border: 1px solid #000;
}
table {
width: 100%;
}
tr:nth-child(2n) {
background: rgba(0, 255, 0, 0.1);
}
tr:nth-child(2n + 1) {
background: rgba(0, 0, 0, 0.1);
}
<table>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
</tr>
</table>
关于jquery - 选择奇数和偶数元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32323625/