I'm following http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/ pretty closely, which works great, but it seems that I'd have to already have a table in the HTML. I want to construct a table later in the program and then run it through treeTable to get the expandable view. When I get rid of the "$(document).ready(function()" and replace it with a regular function, and then call that function after constructing the table, the view doesn't work like it's supposed to.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"> </script>
<link href="./jquery/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./jquery/jquery.treeTable.js"></script>
<script type="text/javascript">
function init() {
createTable();
$("#pathTable").treeTable();
}
</script>
<script type="text/javascript">
function createTable() {
document.write('<table id="pathTable"><tbody>');
document.write('<tr id="node-0"><td>node0</td></tr>');
document.write('<tr id="node-1" class="child-of-node-0">');
document.write('<td>node1</td></tr>');
document.write('<tr id="node-2" class="child-of-node-1">');
document.write('<td>node2</td></tr>');
document.write('</tbody></table>');
}
</script>
</head>
<body onload="init()">
</body>
</html>
Answering my own question:
It turns out that document.write() wasn't writing to the DOM and so I couldn't do anything further with the table.
A helpful site here that I found that fixes the problem