Kyle
Reputation: 1578
How can I "treefy" my table?
I have this table I would like to create trees inside of it, I've used some libraries but the problem is it messes up the table, so I've been wondering if there's a library that doesn't change the table's settings, only "treefies" the table.
"May the force be with you"
My Table
What happens when I use the JqTree library, for 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;
}
for (var i = 0; i < allTables.length; i++) {
if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
var trs = allTables[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++) {
removeClassName(trs[j], 'alternateRow');
addCSSClass(trs[j], 'normalRow');
}
for (var k = 0; k < trs.length; k += 2) {
removeClassName(trs[k], 'normalRow');
addCSSClass(trs[k], 'alternateRow');
}
}
}
}
}
function calcTh() {
var table = document.getElementsByTagName(table);
for (var i = 0; i < table.length; i++) {
table[i].width = (100 / table.length) + "%";
}
}
function calc() {
var table = document.getElementById("Stable");
var w = table.offsetWidth; //total width of the table
for (var y = 0; y < table.rows.length; y++) { // cycle through rows
var row = table.rows[y];
for (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' for a 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,
a {
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 for striping the 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 with 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 with 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>Upvotes: 2
Views: 350
Answers (1)
Ryan Rossiter
Reputation: 418
The solution I came up with is to hide the children rows using style.display="none" then when the parent row is clicked on it expands all of its children. This is scalable to multiple children, as each row has its tree level in its' attribute data-rowIndex. You identify a row as having children by giving it the class hasChildren.
Working JSFiddle.
I'm actually pretty proud of this. :)
Upvotes: 2
Related Questions
- How to convert a tree-like structure to a plain HTML table using rowspans?
- How to create a collapsing tree table in html/css/js?
- How do I present a tree in an HTML table?
- Collapsing tree table using plain javascript
- Create tree table from JSON object using jQuery
- Recursive HTML table tree using only JavaScript
- Create complex table structure
- How can i do Table level hierarchy in jquery?
- TreeTable by HTML+CSS
- JQuery - Adding Cells to Dynamic Tree Table