I want to toggle table rows

Codingnewbie

I am trying to toggle row on a table, I want to be able to click on "Employees (Total)" and want this then to show or hide the list of employees in the rows below. Is this possible with datatables?

Here is my html

<table class="table table-striped table-bordered nowrap" id="dataTables-allsummary1">
<thead>
<tr>
<th>Item</th><th>Nov 2020</th><th>Dec 2020</th><th>Jan 2021</th><th>Feb 2021</th><th>Mar 2021</th><th>Apr 2021</th><th>May 2021</th><th>Jun 2021</th><th>Jul 2021</th><th>Aug 2021</th><th>Sep 2021</th><th>Oct 2021</th></tr>
 </thead>
  
<tbody>
<tr><td>Employees (Total)</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
<tr><td>Employee 1</td> <td>0</td><td>0</td><td>0</td><td>0</td><td>4167</td><td>4167</td><td>4167</td><td>4167</td><td>4167</td><td>4167</td><td>4167</td><td>4167</td></tr>
<tr><td>Employee 2</td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>


</tbody>
</table>

kthorngren

Doe this example show what you want to do.

Kevin

Codingnewbie

Thanks Kevin, I want to do this with the raw html if possible, I am not using Ajax

kthorngren

You don't have to use ajax. You can use a DOM sourced table.

Kevin