jquery 表格按节行分级

hmtdttj4  于 2023-02-03  发布在  jQuery
关注(0)|答案(1)|浏览(112)

我有一个类似这样的表:

$(document).ready(function() {
  $('.band tr.highlight').next('tr').each(function() {
    $(this).addClass('transparent');
  });
});
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;
}
<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>

问题是我希望每个部分的第一行是透明的。然后在部分中的其余行交替颜色/透明。我添加了一个"transparent"类到部分行之后的行,但我不确定如何在其余行上开始循环或类似的操作。我如何添加到脚本(CSS解决方案也很棒)来处理其余行?

zwghvu4y

zwghvu4y1#

这是我的解决方案,我首先将transparent类添加到highlight类之后的第一行,然后使用nextUntil方法循环通过接下来的行,直到另一个突出显示,我为其他行添加了gray类,这是演示:

$(document).ready(function() {
  $('.band tr.highlight').next('tr').each(function() {
    $(this).addClass('transparent');
    var i = 1;
    $(this).nextUntil('.highlight').each(function() {
      if (i % 2 === 0) {
        $(this).addClass('transparent');
      } else {
        $(this).addClass('gray');
      }
      i++;
    });
  });
});
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), .band tr.gray{
    background-color: gray;
}

.band tr.transparent {
  background-color: transparent !important;
}
<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>

相关问题