After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented as child rows that have the same appearance as the parent rows.
Below is an example of an HTML table layout:
<table class="collapse table">
<tr>
<th>Age</th>
<th>Sex</th>
<th>Name</th>
<th>From</th>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
The number of child and parent rows can vary, so I need a solution that can adapt to this flexibility. When the page loads, the child rows should be collapsed and only expand when the user clicks on the parent row. Additionally, I would like to include an icon to indicate to the user the ability to click on a row, using a "+" and "-" symbol as icons rather than plain text.
I have searched for solutions on various platforms including Stack Overflow, but none of them perfectly fit my requirements. Most examples were based on Datatables, which I prefer not to use in this case.
Can anyone provide assistance with this? I understand that my request is comprehensive, but I have not been able to find a complete example using just HTML, CSS, and Javascript.
Thank you.
Edit after Andrei Gheorghiu's answer :
My ultimate goal is to click only on the icon to reveal the child rows, as I have other buttons on the same row that should not activate the child rows. Until I find a better solution, here's what I've done:
HTML: I changed the "tr" to a specific "td" class and added the icon line within this "td.toto" class.
JS:
$('table').on('click', 'td.toto', function(){
console.log("Check click works: ");
$(this).closest('tbody').toggleClass('open');
});
Is it possible to follow the suggested structure but only change the click target to the icon? By a better solution, I mean clicking exclusively on the icon rather than the entire "td" now.
Thank you.