i have table create trees inside of it, i've used libraries problem messes table, i've been wondering if there's library doesn't change table's settings, "treefies" table.
"may force you"
my table 
what happens when use jqtree library, example, 
function removeclassname(elem, classname) { elem.classname = elem.classname.replace(classname, "").trim(); } function addcssclass(elem, classname) { removeclassname(elem, classname); elem.classname = (elem.classname + " " + classname).trim(); } string.prototype.trim = function() { return this.replace(/^\s+|\s+$/, ""); }; function stripedtable() { if (document.getelementbyid && document.getelementsbytagname) { var alltables = document.getelementsbytagname('table'); if (!alltables) { return; } (var = 0; < alltables.length; i++) { if (alltables[i].classname.match(/[\w\s ]*scrolltable[\w\s ]*/)) { var trs = alltables[i].getelementsbytagname("tr"); (var j = 0; j < trs.length; j++) { removeclassname(trs[j], 'alternaterow'); addcssclass(trs[j], 'normalrow'); } (var k = 0; k < trs.length; k += 2) { removeclassname(trs[k], 'normalrow'); addcssclass(trs[k], 'alternaterow'); } } } } } function calcth() { var table = document.getelementsbytagname(table); (var = 0; < table.length; i++) { table[i].width = (100 / table.length) + "%"; } } function calc() { var table = document.getelementbyid("stable"); var w = table.offsetwidth; //total width of table (var y = 0; y < table.rows.length; y++) { // cycle through rows var row = table.rows[y]; (var x = 0; x < row.cells.length; x++) { // cycle through cells var cell = row.cells[x]; cell.style.width = (w / row.cells.length) + "px"; // add 'px' unit } } } window.onload = function() { stripedtable(); calc(); }; window.onresize = function() { stripedtable(); calcth(); calc(); };th, td { word-break: break-all; } html { width: 100%; height: 100%; overflow: hidden; } body { background: #fff; color: #000; font: normal normal 12px verdana, geneva, arial, helvetica, sans-serif; margin: 10px; padding: 0; } table, td, { color: #000; font: normal normal 12px verdana, geneva, arial, helvetica, sans-serif } h1 { font: normal normal 18px verdana, geneva, arial, helvetica, sans-serif; margin: 0 0 5px 0 } div.tablecontainer { clear: both; border: 1px solid #963; padding-right: 1px; height: 285px; overflow: auto; width: 100%; } html>body div.tablecontainer { overflow: hidden; width: 100%; height: 83%; } div.tablecontainer table { float: left; width: 100%; height: 100%; } html>body div.tablecontainer table { width: calc(100% - 16px); height: 100%; } thead.fixedheader tr { position: relative } html>body thead.fixedheader tr { display: block } thead.fixedheader th { background: #c96; border-left: 1px solid #eb8; border-right: 1px solid #b74; border-top: 1px solid #eb8; font-weight: normal; padding: 4px 3px; text-align: left; } thead.fixedheader a, thead.fixedheader a:link, thead.fixedheader a:visited { color: #fff; display: block; text-decoration: none; width: 100%; } thead.fixedheader a:hover { color: #fff; display: block; text-decoration: underline; width: 100%; } html>body tbody.scrollcontent { display: block; overflow: auto; width: 100%; height: 100%; } /* make td elements pretty. provide alternating classes striping table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scrollcontent td, tbody.scrollcontent tr.normalrow td { background: #fff; border-bottom: none; border-left: none; border-right: 1px solid #ccc; border-top: 1px solid #ddd; padding: 2px 3px 3px 4px } tbody.scrollcontent tr.alternaterow td { background: #eee; border-bottom: none; border-left: none; border-right: 1px solid #ccc; border-top: 1px solid #ddd; padding: 2px 3px 3px 4px } .scrolltable, .scrollcontent { overflow: visible; } html>body tbody.scrollcontent { width: calc(100% + 17px); }<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>pure css scrollable table fixed header</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="language" content="en-us"> <style type="text/css"></style> </head> <body> <h1>pure css scrollable table fixed header</h1> <div id="tablecontainer" class="tablecontainer"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrolltable" id="stable"> <thead class="fixedheader"> <tr class="alternaterow"> <th><a href="#">header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a> </th> <th><a href="#">header 2</a> </th> <th><a href="#">header 3</a> </th> <th><a href="#">header 2</a> </th> <th><a href="#">header 3</a> </th> <th><a href="#">header 2</a> </th> <th><a href="#">header 3</a> </th> </tr> </thead> <tbody class="scrollcontent"> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="normalrow"> <td>cell content 1</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> <tr class="alternaterow"> <td>more cell content 1</td> <td>more cell content 2</td> <td>more cell content 3uhauhauhauhauhauhauhauhauhauhauhauhauhauhuhauhauhauhauhahuauhahahuauh</td> <td>cell content 2</td> <td>cell content 3</td> <td>cell content 2</td> <td>cell content 3</td> </tr> </tbody> </table> </div> <div> <br> </div> </body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span> </html>
the solution came hide children rows using style.display="none" when parent row clicked on expands of children. scalable multiple children, each row has tree level in its' attribute data-rowindex. identify row having children giving class haschildren.
working jsfiddle.
i'm pretty proud of this. :)
Comments
Post a Comment