选择奇数和偶数元素[重复]答案

【问题标题】：Selecting odd and even elements [duplicate]选择奇数和偶数元素[重复]
【发布时间】：2015-11-26 05:14:55
【问题描述】：

我想为 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() 函数

【问题讨论】：

$( "tr:even" ).addClass('even');$( "tr:odd" ).addClass('odd');见api.jquery.com/even-selector

标签： jquery html css

【解决方案1】：

如果你有 jQuery，你可以使用 :odd 和 :even 选择器

$('tr:odd').addClass('odd');
$('tr:even').addClass('even');

Demo

$('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>

【讨论】：

【解决方案2】：

尝试使用伪类选择器添加样式：nth-of-type with even and odd。

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr:nth-of-type(odd) {
  background: rgba(0, 255, 0, 0.1);
}
tr:nth-of-type(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>

【讨论】：

【解决方案3】：

试试 CSS 奇/偶选择器。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

【讨论】：

【解决方案4】：

尝试使用 css :nth-of-type() 带有 odd 、 even 值的伪类选择器集

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr:nth-of-type(odd) {
  background: rgba(0, 255, 0, 0.1);
}
tr:nth-of-type(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>

【讨论】：