Table Row Banding by Section - html

Question

I have a table that looks like this:
$(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>
The issue is that I would like the first row of each section to be transparent. Then alternate color/transparent for the remaining rows in the section. I added a "transparent" class to the row 's after the section row, but I am not sure how to start a loop or the like on the remaining rows. How can I add to the script (css solutions are great too) to handle the remaining rows?

Answer 1

This is my solution, I first added the transparent class to the first row after highlight class, then use the nextUntil method to loop through the next rows until another highlight, I added the class gray for the other rows, and this is the demo:
$(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>