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:
ProductPriceDestinationUpdated on
+Oranges100On Store22/10
121120City 122/10
212140City 222/10
212140City 222/10
+Apples100On Store22/10
120120City 122/10
120140City 222/10
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.