CodeThatTree - Using HTML tables as node's text Example

In this example we use complex HTML content inside tree nodes. This HTML content includes tables, styles and different node's appearance. Pay your attention please that HTML tables generates by additional functions makeTableTitle, makeTableFolder, makeTableItem, makeTableItem2. However these functions use in TreeDef as node's text, table appearance is defined in functions. If you wish use this example you need customize not only TreeDef but functions used for generating HTML tables.

	 <style>
	 TD{font-size:13px;font-family:Times New Roman;cursor:hand;}
	 IMG{border-width:0px;}
	 .item {color:white; text-transform:uppercase;font-weight:bold;}
	 .item2 {color:gray; }
	 .title {color:#909090; font-weight:bold;}
	 </style>
	<script language="javascript1.2">
	CT_IMG_BLANK="tree/img/1x1.gif";
	
	 
	 //This function makes HTML table. This table code  uses as title table with the last level nodes
	 //!  is space in html escape chars
	 
	 function makeTableTitle (title1, title2, title3){
	  var html = '<table cellpadding="0" cellspacing="0" border="0" class="item2"><tr>'
	+'<td width="3"><img src="img/titlestart.gif"></td>'
	+'<td width="454" background="img/titlebg.gif">         ' +  title1 + '</td>'
	+ '<td width="3"><img src="img/titleend.gif"></td>'
	+ '<td width="2"><img src="img/1x1.gif"></td>'
	+ '<td width="3"><img src="img/titlestart.gif"></td>'
	+ '<td width="90" background="img/titlebg.gif" align="center">' +  title2 + '</td>'
	+ '<td width="3"><img src="img/titleend.gif"></td>'
	+ '<td width="2"><img src="img/1x1.gif"></td>'
	+ '<td width="3"><img src="img/titlestart.gif"></td>'
	+ '<td width="75" background="img/titlebg.gif" align="center">' +  title3 + '</td>'
	+ '<td width="3"><img src="img/titleend.gif"></td></tr>'
	+ '</table>';
	return html;
	 };
	 
	  
	 //This function makes HTML table. This table code uses as last level node's text
	 //!  is space in html escape chars
	 
	 function makeTableItem2(item1, item2, item3){
	 var html='<table cellpadding="0" cellspacing="0" border="0" class="item2"><tr>'
	+ '<td width="3"><img src="img/itemstart2.gif"></td>'
	+ '<td width="435" background="img/itembg2.gif">  ' + item1 + '</td>'
	+ '<td width="3"><img src="img/itemend2.gif"></td>'
	+ '<td width="2"><img src="img/1x1.gif"></td>'
	+ '<td width="3"><img src="img/itemstart2.gif"></td>'
	+ '<td width="90" background="img/itembg2.gif" align="center">' + item2 + '</td>'
	+ '<td width="3"><img src="img/itemend2.gif"></td>'
	+ '<td width="2"><img src="img/1x1.gif"></td>'
	+ '<td width="3"><img src="img/itemstart2.gif"></td>'
	+ '<td width="75" background="img/itembg2.gif" align="center">' + item3 + '</td>'
	+ '<td width="3"><img src="img/itemend2.gif"></td></tr>'
	+ '</table>';
	return html;
	 };
	 
	  
	 //This function makes HTML table. This table uses as first level node's text
	 //!  is space in html escape chars
	 
	function makeTableFolder(text){
	 var html='<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>'
	+ '<td width="1"><img src="img/1x1.gif"></td>'
	+ '<td width="3"><img src="img/folderstart.gif"></td>'
	+ '<td width="99%" background="img/folderbg.gif"> ' + text + '</td>'
	+ '<td width="3"><img src="img/folderend.gif"></td></tr></table>'
	return html;
	};
	  
	 //This function makes HTML table. This table uses as middle level node's text
	 //!  is space in html escape chars
	 	
	function makeTableItem(text){
	 var html='<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>'
	+ '<td width="1"><img src="img/1x1.gif"></td>'
	+ '<td width="99%" background="img/itembg.gif" class="item">     ' + text + '</td>'
	+ '<td width="3"><img src="img/itemend.gif"></td></tr></table>'
	return html;
	};
	
	 //Here are we define TreeDef object and uses our functions
	 
	 var TreeDef = {
	  "style" : {
	   "itemoffset" : {
				"x" : "8", "y" : "2"
	   },
	   "fixwidth":663,
	   "size":[664, 20],
	   "imgdir" : "img/folderclose.gif", // Image for directories
	   "imgdiropen" : "img/folderopen.gif" // Image for directories in open state
	  },
	  items : [
	   {
	    "text" : makeTableFolder("Vivamus a nibh luctus est ullamcorper adipiscing"),
	    "menu" : {
	        "style" : {
	        	   "imgdir" : "img/itemclose.gif", // Image for directories
	  		   "imgdiropen" : "img/itemopen.gif", // Image for directories in open state
	  		   "imgitem" : "img/itemicon2.gif",
	  		   "size":[658, 20]
	        },
	        "items" : [
	          {
	          "text": makeTableItem("THE WILD BEHAVIOUR OF FELINES"),
	          "menu":{
	           "items":[
	           		{"style": {imgitem:null}, "text" :  makeTableTitle('Document Title', 'File size', 'Format'), "form":true},
	           		{"text" : makeTableItem2('Tropical Rain Forest', ' ', ' '), "action" : {"url" : "treetest.html"}}, //action example
	           		{"text" : makeTableItem2('Chinese region, Bengal Tiger density', ' ', ' ')},
	           		{"text" : makeTableItem2('North America', ' ', ' ')}
	           	]
	          }
	         },
	         {
	         "text": makeTableItem("THE WILD BEHAVIOUR OF FELINES"),
	         "menu":{
	           "items":[
	           		{"style": {imgitem:null}, "text" :  makeTableTitle('Document Title', 'File size', 'Format'), "form":true},
	           		{"text" : makeTableItem2('Tropical Rain Forest', ' ', ' ')},
	           		{"text" : makeTableItem2('Chinese region, Bengal Tiger density', ' ', ' ')},
	           		{"text" : makeTableItem2('North America', ' ', ' ')}
	           	]
	         }
	         }
	        ]
	     }
	   },
	   {
	    "text" : makeTableFolder("Vivamus a nibh luctus est ullamcorper adipiscing"),
	    menu : {
	     }
	   },
	   {
	    "text" : makeTableFolder("Vivamus a nibh luctus est ullamcorper adipiscing"),
	    menu : {
	     }
	   }
	  ]  
	 };
	  </script>
	  ...
	  <script language="javascript1.2">
	<!--
	var t1 = new CTree(TreeDef, "sample");
	t1.create();
	t1.draw();
	//-->
	</script>