Search code examples
jquerytreetable

jquery treeTable with undetermined table


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>

Solution

  • 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