javascript - 将 CSS "stripe"效果应用于 JavaScript 中动态插入的表格行

Question

我做了一张 table 。在那里，当我点击按钮时，添加了一行。我想为插入的行分配替代颜色。

$("#new-row").click(function() {
  $('#first').clone(true).insertAfter('#demo tbody>tr:last');

  if ($('#demo tr:last').hasClass("lgrey")) {
    $('#demo tr:last').removeClass("lgrey");
    $('#demo tr:last').addClass("dgrey");
  } else if ($('#demo tr:last').hasClass("dgrey")) {
    $('#demo tr:last').removeClass("dgrey");
    $('#demo tr:last').addClass("lgrey");
  };

});

.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr class="lgrey" id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>

但是运行这段代码并没有得到预期的结果。

请帮助为插入的行分配替代颜色。

Answer 1

为此您不需要 JavaScript。 . .使用 :nth-child(an+b)选择器代替。这种方法比摆弄不必要的类和 jQuery 代码要清晰得多。

将 .lgrey 和 .dgrey 选择器替换为 #demo tr:nth-child(2n+2) 和 #demo tr:nth-child(2n+3)，分别。

(请注意，正如其他一些人所建议的那样，使用 even 和 odd 将不允许您保留标题行的样式。)

$('#new-row').click(function () {
  $('#first').clone(true).insertAfter('#demo tr:last')
})

#demo tr:nth-child(2n+2) {
  background-color: #eee;
}

#demo tr:nth-child(2n+3) {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>