如何按段落实现表格行交替透明与着色效果？

问题描述 #

我需要实现表格的以下效果：每个段落（以highlight类的行作为标题）的第一行设为透明，剩余行交替显示颜色与透明效果。目前已经给段落标题行后的第一行添加了transparent类，但不知道如何循环处理剩余行，请问如何补充脚本或使用CSS实现该效果？

原表格结构及现有代码如下：

现有HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr class="highlight">
    <td colspan="3">section 2</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr class="highlight">
    <td colspan="3">section 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
</tbody>
</table>

现有CSS代码 #

table {
    border-collapse: collapse;
}

th {
    text-align: left;
    color: white;
    padding: .5rem;
}

th:nth-child(odd) {
    background-color: darkgray;
}

th:nth-child(even) {
    background-color: green;
}

tr.highlight {
    background-color: red;
    color: white;
}

.band tr:nth-child(even):not(.highlight) td {
    background-color: gray;
}

现有JS代码 #

$(document).ready(function() {
  $('.band tr.highlight').next('tr').each(function() {
    $(this).addClass('transparent');
  });
});

解决方案 #

先补充transparent类的CSS样式 #

不管用哪种方案，都需要先定义透明行的样式，把这段代码加到你的CSS里：

.transparent td {
    background-color: transparent !important;
}

方案一：jQuery脚本实现（无需修改HTML结构） #

遍历每个highlight标题行，找到它后面直到下一个标题行的所有内容行，给首行加透明类，剩余行从第二行开始交替设置透明和颜色：

修改后的JS代码：

$(document).ready(function() {
  $('.band tr.highlight').each(function() {
    // 获取当前标题行之后的所有内容行，直到下一个标题行或表格结尾
    const $contentRows = $(this).nextUntil('.highlight');
    
    // 给首行加透明类
    $contentRows.eq(0).addClass('transparent');
    
    // 剩余行从第二行开始交替设置样式
    $contentRows.slice(1).each(function(index) {
      if (index % 2 === 0) {
        $(this).addClass('transparent');
      } else {
        $(this).removeClass('transparent');
      }
    });
  });
});

方案二：纯CSS实现（需要调整HTML结构） #

如果可以修改HTML，把每个段落（标题行+内容行）放到独立的<tbody>中，就能用CSS实现效果，不需要JS：

修改后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
</thead>
<!-- 第一个段落 -->
<tbody>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
</tbody>
<!-- 第二个段落 -->
<tbody>
  <tr class="highlight">
    <td colspan="3">section 2</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
</tbody>
<!-- 第三个段落 -->
<tbody>
  <tr class="highlight">
    <td colspan="3">section 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
  <tr>
    <td>info 1</td>
    <td>info 2</td>
    <td>info 3</td>
  </tr>
</tbody>
</table>

修改后的CSS

table {
    border-collapse: collapse;
}

th {
    text-align: left;
    color: white;
    padding: .5rem;
}

th:nth-child(odd) {
    background-color: darkgray;
}

th:nth-child(even) {
    background-color: green;
}

tr.highlight {
    background-color: red;
    color: white;
}

/* 带标题的段落：首行透明 */
.band tbody:has(.highlight) tr.highlight + tr td {
    background-color: transparent;
}

/* 带标题的段落：剩余行交替颜色 */
.band tbody:has(.highlight) tr.highlight + tr ~ tr:nth-child(odd) td {
    background-color: gray;
}

.band tbody:has(.highlight) tr.highlight + tr ~ tr:nth-child(even) td {
    background-color: transparent;
}

/* 无标题的段落保持原有交替效果 */
.band tbody:not(:has(.highlight)) tr:nth-child(even) td {
    background-color: gray;
}

注意：:has()选择器需要现代浏览器支持，如果要兼容旧版本浏览器，优先用方案一。

内容的提问来源于stack exchange，提问作者Iisrael