<!doctype html>
<html>
<head>
<style>
body {
font-size: 16px;
min-height: 100vh;
padding: 0;
margin: 0;
background-color: #fefefe;
color: #333;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
span:hover {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var datalist = [{ "ID": "1", "ParentID": "0", "Name": "Parent1" }, { "ID": "2", "ParentID": "0", "Name": "Parent2" },
{ "ID": "3", "ParentID": "1", "Name": "Child 1.1" }, { "ID": "4", "ParentID": "1", "Name": "Child 1.2" },
{ "ID": "5", "ParentID": "3", "Name": "SubChild 1.1.1" }, { "ID": "6", "ParentID": "2", "Name": "Child 2.1" },
{ "ID": "7", "ParentID": "0", "Name": "Parent3" }];
var tree = "";
$(document).ready(function () {
PopulateTreeNode(datalist, "1");
$(tree).appendTo("#div_content");
});
function PopulateTreeNode(data, parentid) {
var newdata = data.filter(function (value) {
return (value.ParentID == parentid);
});
tree += "<tr>";
newdata.forEach(function (e) {
var parentItem = "<td >" + e.Name + "</td>";
tree = tree + parentItem;
PopulateTreeNode(data, e.ID);
})
tree += "</tr>";
};
</script>
</head>
<body>
<div id="div_content">
</div>
</body>
</html>
supportuae 