Showing a tree of data

Start with one node:

var TREEdata={
   children : [],
   label : "Vismay's Concept's"
}

function TREEaddChildren(N){
   for (var i=0; i < N; i++){
      TREEdata.children[i] = { label : "Node " + i, children : []} 
   }
}

function TREErender(T){
   var H = '';
   H += "<div class='TREEnode'>" + T.label;
   for (var i=0; i < T.children.length; i++){
      H+= TREErender(T.children[i]);
   }
   H += "</div>";
   return H;
}

We add a bit of styling:

.TREEnode {
    margin-left: 18px;
    padding: 2px;
    border: solid 1px blue;
}

We put a containing div around it.

document.body.innerHTML = "<div class='TREEcontainer'>" + H + "</div>"

We contain the tree with this:

.TREEcontainer {
   width: 300px;
}

TREEcontainer.addEventListener("click", function(e) { TREEevent = e })

function TREEfindMyOrder(N){
   var i = 1;
   while( (N = N.previousSibling) != null ){ 
     i++;
   }
   return i-1;
}

function TREEisContainer(T) { return T.classList[0] === 'TREEcontainer';}

TREEaddress(T) { 
   var i =0;
   var Address = [];
   while (!TREEisContainer(T.path[i])){ 
      Address.push(TREEfindMyOrder(T.path[i]));
      i++;
   }
   return Address.reverse();
}

TREEcontainer.addEventListener("click", function(e) { TREEevent = e; TREEloc = TREEaddress(e); })

Concepts

Showing a tree of data

Related content