I am trying to create a dynamic table. The user will select checkboxes that will toggle column headers depending on which checkboxes the user selects. Additionally I am trying to use CSS to generate the first row of blank inputs for the user. The checkboxes don't select columns that are grouped (like even, odd, or first 5, etc) and there is overlap between which columns are displayed after selecting checkboxes 1-4. Here's an example of my code:
<body>
<input type="checkbox" id="checkbox">
<label>checkbox</label>
<table id="table">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</table>
</body>
</html>
And CSS;
/*------------------------Initialize with just checkbox for user selection*/
table th, td
{
display: none;
}
/*-------------------------Show columns based on user checkbox selection*/
#checkbox:checked ~
#table th:nth-child(1)
{
display: inline-block;
}
#checkbox:checked ~
#table th:nth-child(2)
{
display: inline-block;
}
#checkbox:checked ~
#table th:nth-child(3)
{
display: inline-block;
}
/*------------------------Generate first row*/
#checkbox:checked ~
#table td:nth-child(1)
{
display: inline-block;
}
#checkbox:checked ~
#table td:nth-child(2)
{
display: inline-block;
}
#checkbox:checked ~
#table td:nth-child(3)
{
display: inline-block;
}
/*------------------------Drown in wetness*/
Here's the CSS I have read should work, but I haven't been able to get to work:
/*-------------------------Show user specific columns*/
#checkbox:checked ~
#table th:nth-child(1),
#table th:nth-child(2),
#table th:nth-child(3)
{
display: inline-block;
}
/*------------------------Generate first row*/
#checkbox:checked ~
#table td:nth-child(1),
#table td:nth-child(2),
#table td:nth-child(3)
{
display: inline-block;
}
I'm a beginner and if possible I'd like to use CSS for this. However, if there's a more elegant solution with JS or JQuery I'm open to it. The data users enter will be added together based on the header category and I'll need a way to determine which data was entered under a given header.
Thanks in advance for your help.
Aucun commentaire:
Enregistrer un commentaire