CSS:
table.treeview { border-collapse:collapse; border:0; } table.treeview td { padding:0 2px 0 0; vertical-align:middle; } table.treeview td img.minus { cursor:pointer; } table.treeview td img { margin:0; } table.treeview td input { margin:0; }HTML:
<table class="treeview"><tbody><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/female.png" /></td><td>Goverment</td> </tr><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/find.png" /></td><td>Health</td> </tr><tr> <td><img src="img/m.gif" class="minus" /></td><td><input type="checkbox" /></td><td><img src="img/flashdisk.png" /></td><td>Recreation & Sports</td> </tr><tr> <td></td><td colspan="3"> <table class="treeview"><tbody><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/folder.png" /></td><td>Goverment</td> </tr><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/font.png" /></td><td>Health</td> </tr><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/group.png" /></td><td>Recreation & Sports</td> </tr></tbody></table> </td> </tr><tr> <td><img src="img/d.gif" /></td><td><input type="checkbox" /></td><td><img src="img/help.png" /></td><td>Health</td> </tr></tbody></table>javascript:
var oTV = new TreeView(); function TreeView(){ var oElems = document.getElementsByClassName("minus"); var nEl; for (nEl = 0; nEl<oElems.length; nEl++){ oElems[nEl].onclick = Toggle; } function Toggle(e){ var oEl = e.target; var oElTab = oEl.parentNode.parentNode.nextSibling; if (oEl.src.slice(-9) === "img/m.gif"){ oEl.src = "img/p.gif"; oElTab.style.display="none"; } else { oEl.src = "img/m.gif"; oElTab.style.display="table-row"; } } }
No comments:
Post a Comment