OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Striping a dynamic table

  • Thread starter Thread starter LG1023
  • Start date Start date
L

LG1023

Guest
I have a dynamic table that is pulling in rows based on ccss class. All of the rows are set to display:none until they are called in. I want to have alternate row colors for readability (white and gray alternating). When I pull the rows in they keep their color that they were assigned when the entire table is present. I have seen other topics on this but the code is not working for me.

CSS

Code:
.new-table tbody tr:nth-child(2n) {background-color: #f1f1f1;}
.new-table tbody tr {display: none;}

HTML

Code:
<table class="new-table">
<tbody>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="D">
<td></td>
<td></td>
</tr>
</tbody>
</table>


<script>
var show = document.querySelectorAll(".C");   
for (let i = 0; i < show.length; i++) {
if (show[i].style.display === "none"){
show[i].style.display = "none";
}else{
show[i].style.display = "table-row";  
}
}    
</script>

<p>I have a dynamic table that is pulling in rows based on ccss class. All of the rows are set to display:none until they are called in. I want to have alternate row colors for readability (white and gray alternating). When I pull the rows in they keep their color that they were assigned when the entire table is present. I have seen other topics on this but the code is not working for me.</p>
<p>CSS</p>
<pre><code>.new-table tbody tr:nth-child(2n) {background-color: #f1f1f1;}
.new-table tbody tr {display: none;}
</code></pre>
<p>HTML</p>
<pre><code><table class="new-table">
<tbody>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="D">
<td></td>
<td></td>
</tr>
</tbody>
</table>


<script>
var show = document.querySelectorAll(".C");
for (let i = 0; i < show.length; i++) {
if (show.style.display === "none"){
show.style.display = "none";
}else{
show.style.display = "table-row";
}
}
</script>
</code></pre>
 

Latest posts

A
Replies
0
Views
1
Anthonin Chaboteaux
A
Top