html - 表交替彩色行。使用属性在表格行上保留样式，跳过其他 tr。最好由 CSS 完成

Question

我正在处理一个具有可点击行的表格。当您单击一行时，将在您单击的行之后添加一个新行。

// before click
<tr role=row>...</tr>
<tr role=row>...</tr>

//after clicking the 1st tr
<tr role=row>...</tr>
<tr>...</tr>
<tr role=row>...</tr>

我需要的是带有 role="row" 的行获得交替的颜色和 tr没有 Angular 色的 s 被忽略。
这是我到目前为止:

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<tr colspan="4"><td>-</td></tr>')
    .attr('data-toggle', 0);
  }
});

.myclass > tbody > tr[role=row]:nth-child(odd) td {
    background-color: #fad;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

问题是，每当您添加新行(没有 role )时，它仍然对 css 选择器和带有 role="row" 的行计数。被错误地改变。
简而言之:我想要一个仅应用于 tr 的斑马样式s 与 role="row"即使插入一行也能保持颜色
如果在CSS中无法完成，jquery也可以。
任何帮助和反馈将不胜感激!
编辑:

Temani Afif 的回答很好，但我需要保持这张 table 的原样。

Temani Afif 的第三个解决方案最适合我。

Answer 1

使用您自己的元素重做表格逻辑，您可以使用 nth-of-type 轻松实现这一点。如果插入不同类型的元素:

$('[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<section><span >-</span></section>')
    .attr('data-toggle', 0);
  }
});

.myclass [role=row]:nth-of-type(odd) * {
    background-color: #fad;
}
.myclass {
  display:table;
  border-spacing:2px;
}
.myclass > * {
  display:table-row;
}
.myclass > * > * {
  display:table-cell;
}
header {
  font-weight:bold;
}

tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass">
    <header>
      <span>head 1</span>
      <span>head 2</span>
      <span>head 3</span>
      <span>head 4</span>
    </header>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
</div>

或者一个hacky的想法(我坚持hacky)是在保持表格的同时引入不同的元素:

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<div><td>-</td></div>')
    .attr('data-toggle', 0);
  }
});

.myclass > tbody > tr[role=row]:nth-of-type(odd) td {
    background-color: #fad;
}

.myclass > tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

或者简单地使用 jQuery 初始化着色:

$('.myclass > tbody > tr[role=row]:nth-of-type(odd) td').css('background-color','#fad')

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<tr><td>-</td></tr>')
    .attr('data-toggle', 0);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>