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.
<!--
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";
}
Thanks in Advance.