为展开的交替行显示不同的背景 table

Question

我正在使用 primeNg 行扩展功能。代码在这里：https://primefaces.org/primeng/showcase/#/table/rowexpansion

我有一个要求，奇数行显示黄色背景，偶数行显示灰色背景，但是在计算过程中不应包括具有子 table 的附加插入行。

考虑下面的 html 示例，其中用户展开了第一行。我不希望 'table-row-expand' class 的行在 even/odd 规则中被考虑。在这里，我希望第一行为黄色，第二行为灰色，第三行再次为黄色。展开的行不应有任何背景。

请注意，仅当用户展开相应行时，.table-row-expand 行才会添加到 DOM。请帮我解决这个问题。

.table-row:nth-child(odd) {
  background-color: yellow;
}

.table-row:nth-child(even) {
  background-color: grey;
}

<table>
  <tr class='header-row'>
    <th> </th>
  </tr>
  <tr class='table-row'>
    <td> // first row (should be gray)</td>
  </tr>
  <tr class='table-row-expand'>
    <td> // expanded row (should not be colored)
      <div>
        <p-table> // child table </p-table>
      </div>
    </td>
  </tr>
  <tr class='table-row'>
    <td> // second row (should be yellow)</td>
  </tr>
  <tr class='table-row'>
    <td> // third row (should be gray)</td>
  </tr>
</table>

Answer 1

让自己不再头疼，来点滴 JavaScript。您可能需要将此代码放入函数中，以便在添加新行时调用。

.table-row.odd {
  background-color: yellow;
}

.table-row.even {
  background-color: grey;
}

<table>
  <tr class='header-row'>
    <th> </th>
  </tr>
  <tr class='table-row'>
    <td> // first row (should be gray)</td>
  </tr>
  <tr class='table-row-expand'>
    <td> // expanded row (should not be colored)
      <div>
        <p-table> // child table </p-table>
      </div>
    </td>
  </tr>
  <tr class='table-row'>
    <td> // second row (should be yellow)</td>
  </tr>
  <tr class='table-row'>
    <td> // third row (should be gray)</td>
  </tr>
</table>

<script>
  const styledRows = document.querySelectorAll('.table-row');
  const isOdd = n => Boolean(n % 2); // returns true if n / 2 has a remainder

  styledRows.forEach((row, i) => {
    row.classList.add(isOdd(i) ? 'odd' : 'even');
  });
</script>

为展开的交替行显示不同的背景 table

Display different backgrounds for alternating rows of expanding table

html

css

css-selectors

primeng