Skip to content

Instantly share code, notes, and snippets.

@tnightingale

tnightingale/index.html

Last active March 24, 2016 18:33
Show Gist options
  • Save tnightingale/38d92a23ee191498b673 to your computer and use it in GitHub Desktop.
Save tnightingale/38d92a23ee191498b673 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#root {
height: 500px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
vertical-align: middle;
}
table td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table id="root">
<tr>
<td class="value"></td>
<td class="children">
<table>
<tr>
<td class="value"></td>
<td class="children">
<table>
<tr>
<td class="value">6</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">3</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">2</td>
<td class="children"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="value">3</td>
<td class="children"></td>
</tr>
<tr>
<td class="value"></td>
<td class="children">
<table>
<tr>
<td class="value">9</td>
<td class="children"></td>
</tr>
<tr>
<td class="value"></td>
<td class="children">
<table>
<tr>
<td class="value">6</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">5</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">1</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">4</td>
<td class="children"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="value"></td>
<td class="children">
<table>
<tr>
<td class="value">6</td>
<td class="children"></td>
</tr>
<tr>
<td class="value">5</td>
<td class="children"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="value">8</td>
<td class="children"></td>
</tr>
</table>
<script src="./traverse.js"></script>
</body>
</html>
Raw
traverse.js
var root = document.querySelector("table#root");
toArray(root.rows).forEach(function (tr) {
traverse(tr, processRow, getRowChildren);
});
function getRowChildren(node) {
var tr = node.item,
valueCell = tr.cells[0],
childrenCell = tr.cells[1];
if (childrenCell.children.length && childrenCell.children[0].rows) {
var c = toArray(childrenCell.children[0].rows);
return c;
}
}
function processRow(node, children) {
var tr = node.item,
valueCell = tr.cells[0],
childrenCell = tr.cells[1];
if (children) {
valueCell.textContent = children.reduce(function (smallest, tr) {
var valueCell = tr.cells[0],
childrenCell = tr.cells[1],
value = valueCell.textContent;
if (value && smallest !== undefined) {
return value < smallest ? value : smallest;
}
});
}
}
function traverse(tree, process, getChildren) {
var node = {path: ['root'], item: tree},
nodes = [node],
child;
while (nodes.length) {
node = nodes[0];
if (!node.visited) {
node.visited = true;
node.children = getChildren(node);
if (node.children) {
for (var i in node.children) {
child = {
path: node.path.concat(i),
item: node.children[i]
};
nodes.unshift(child);
}
}
} else {
process(nodes.shift(), node.children);
}
}
}
function toArray(arrayLikeThing) {
return Array.prototype.slice.call(arrayLikeThing);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment