Using Javascript need of recursive html table tree

Question

Requirements is as follow:

 

     

test	test2	test3	test4	test5
+1 parent-data1	data2	data3	date4	dat5
+ sub data-	subdata2	subdata3	subdata4	subdata5
-sub-sub- 1	sub-sub- data-2	sub-sub- data-3	sub-sub- data-4	sub-sub- data-5
+2 parent-data-2	data-2	data-2	data-2	data-2

 

 

Hi I have done showing only displaying clicking on the parent node to display its child row.I just need to enable to click on the child data should open its sub child rows as recursive one or table tree.Please find the code below works perfect please makes changes for subchild

Show.

 

Please free to make changes:

https://jsfiddle.net/naveen65/f53vgfz2/

 html:

<!--

Bootstrap docs: https://getbootstrap.com/docs

-->

<div class="container">

<table class="table" id="products">

<thead>

<tr>

<th>Product</th>

<th>Price</th>

<th>Destination</th>

<th>Updated on</th>

</tr>

</thead>

<tbody>

<tr class="parent">

<td><a href="#">+</a>Oranges</td>

<td>100</td>

<td>On Store</td>

<td>22/10</td>

</tr>

<tr>

<td>121</td>

<td>120</td>

<td>City 1</td>

<td>22/10</td>

</tr>

<tr>

<td>212</td>

<td>140</td>

<td>City 2</td>

<td>22/10</td>

</tr>

<tr>

<td>212</td>

<td>140</td>

<td>City 2</td>

<td>22/10</td>

</tr>

<tr class="parent">

<td><a href="#">+</a>Apples</td>

<td>100</td>

<td>On Store</td>

<td>22/10</td>

</tr>

<tr>

<td>120</td>

<td>120</td>

<td>City 1</td>

<td>22/10</td>

</tr>

<tr>

<td>120</td>

<td>140</td>

<td>City 2</td>

<td>22/10</td>

</tr>

</tbody>

</table>

</div>

javascript:

 

document.getElementById("products").addEventListener("click", function(e) {

if (e.target.tagName === "A") {

e.preventDefault();

var row = e.target.parentNode.parentNode;

while ((row = nextTr(row)) && !/\bparent\b/ .test(row.className))

toggle_it(row);

}

});

function nextTr(row) {

while ((row = row.nextSibling) && row.nodeType != 1);

return row;

}

function toggle_it(item){

if (/\bopen\b/.test(item.className))

item.className = item.className.replace(/\bopen\b/," ");

else

item.className += " open";

}

 

css 

tbody tr {

display : none;

}

tr.parent {

display : table-row;

}

tr.open {

display : table-row;

}

 

Thanks in Advance.