Question

我做了一张桌子。在那里，当我点击按钮时，会添加一行。我想为插入的行指定备用颜色。

＆＃13;

$("#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");
  };

});

＆＃13;

.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}

＆＃13;

<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>

＆＃13;

但是运行此代码并不会产生预期的结果。

请帮助为插入的行指定备用颜色。

Answer 1

使用tr:nth-child css属性，如：

tr:nth-child(even) {
    background-color: #004400;
}

tr:nth-child(odd) {
    background-color: #000000;
}

它将处理生成静态或动态的每个tr的备用颜色。

Answer 2

你不需要JavaScript。。。请改用:nth-child(an+b)选择器。这种方法比弄乱不必要的类和jQuery代码要清晰得多。

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

（请注意，正如其他人所建议的那样，使用even和odd不允许您将标题行保持原样。）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您应该真正使用CSS nth-child(even)和nth-child(even)。

＆＃13;

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

＆＃13;

tr:nth-child(even) {
  background-color: #eee;
}

tr:nth-child(odd) {
  background-color: #ccc;;
}

＆＃13;

<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>

＆＃13;

Answer 4

使用css处理备用行颜色

tr:nth-child(even) {
    background-color: #eee;
}
tr:nth-child(even) {
    background-color: #ccc;
}

DEMO

Answer 5

我在添加新行之前选择行颜色如下：

＆＃13;

$("#new-row").click(function() {
  if ($('#demo tr:last').hasClass("lgrey")) {
    var add = "dgrey";
    var remove = "lgrey";
  } else if ($('#demo tr:last').hasClass("dgrey")) {
    var add = "lgrey";
    var remove = "dgrey";
  };

  $('#first').clone(true).insertAfter('#demo tbody>tr:last');

  $('#demo tr:last').removeClass(remove);
  $('#demo tr:last').addClass(add);

});

＆＃13;

.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}

＆＃13;

<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>

＆＃13;

应用CSS＆＃34; stripe＆＃34;对JavaScript中动态插入的表行的影响

5 个答案: