Question

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>
Was it helpful?

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

OTHER TIPS

I use this code

//Add format to the table 
$("#FormsAffected-Expandable").treetable({ expandable: true , force :true });    

Only create your table and add this sentences, the # name control is the name of your Div.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top