[Nolug] help with problem expanding/collapsing table

Hey, guys. I've got a problem with some javascript. Here's what I'm
doing:

I am creating an object to show rows of data from a mysql table in a
hierarchical tree format. I want the tree to be collapsable. This is the
part that doesn't work right. Here are the unsatisfactory behaviors.

1. When collapsing e.g. the label1 node, on expanding that node the
label field takes up all the width of all the fields below it, thus
pushing everything after the label1 field beyond the original borders of
the table. If I reload and try the same with label2, then labels
1,2,9,10 and 11 are pushed out.

2. When collapsing label3, additional space shows up between label8 and
label9 (looks to be about to row heights worth. This space disapears
when label1 is expanded and collapsed.

Examining the source of the funky table shows nothing amiss. The html is
exactly as it should be. So I wonder if the problem is with the way the
browser is rendering the table.

So what I need is someone to tell me
        a: what the problem really might be,
        b: is there a better, more browswer compliant way to do this

I'm using Mozilla
Mozilla 1.6: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6)
Gecko/20040122 Debian/1.6-1

AKA Netscape6.something

This is teh code.

<?php

        function indent_field($field, $array){
                $right = array();
                for($i=0;$i < sizeof($array);$i++){
                /* only check stack if there is one */
                        if(count($right)>0) {
                        /* check if we should remove a node from the stack */
                                while ($right[count($right)-1]<$array[$i]['rgt']) {
                                        array_pop($right);
                                }
                        }
                        /* display indented node title */
                        $array[$i]['indent'] =
str_repeat("&nbsp;&nbsp;&nbsp;&nbsp;",count($right));
                        /* add this node to the stack */
                                $right[] = $array[$i]['rgt'];
                        } /* end for*/
                        return $array;
        } /* end function */

class class_list extends listbox{
        /* this is what we would have after retrieving data from the */
        /* db and putting it into a multidimensional array*/
        function list_content(){
                $content[0]=array(label=>"label1",lft=>"0",rgt=>"21");
                $content[1]=array(label=>"label2",lft=>"1",rgt=>"14");
                $content[2]=array(label=>"label3",lft=>"2",rgt=>"7");
                $content[3]=array(label=>"label4",lft=>"3",rgt=>"4");
                $content[4]=array(label=>"label5",lft=>"5",rgt=>"6");
                $content[5]=array(label=>"label6",lft=>"8",rgt=>"13");
                $content[6]=array(label=>"label7",lft=>"9",rgt=>"10");
                $content[7]=array(label=>"label8",lft=>"11",rgt=>"12");
                $content[8]=array(label=>"label9",lft=>"15",rgt=>"20");
                $content[9]=array(label=>"label10",lft=>"16",rgt=>"17");
                $content[10]=array(label=>"label11",lft=>"18",rgt=>"19");
                return $content;
        }
}

class listbox{
        var $sql;
        function display(){
                /* get the content we need to display */
                        $content=$this->list_content();
                /* format the content we need to display */
                        $content=indent_field(label, $content);
                /* display the content */
                echo "<table>";
                        for($i=0;$i<sizeof($content);$i++){
                                echo "<tr id=\"".$content[$i]['rgt']."\"";
                                echo "<td>".$content[$i]['indent'];
                                echo "<a
href=\"javascript:hide_children(".$content[$i]['lft'].",".$content[$i]['rgt'].")\">+</a>";
                                echo $content[$i]['label']."</td>";
                                echo "<td>date information</td>";
                                echo "<td>active information</td>";
                                echo "<td>class average</td>";
                                echo "</tr>";
                        }
                echo "</table>";
        }
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<script language="javascript">
var dge=document.getElementById;

function hide_children(lft,rgt){
        var element
        for(n=lft; n<rgt; n++){
                element=document.getElementById(n)
                if(element !== null){
                        document.getElementById(n).style.display =
              (document.getElementById(n).style.display=='none')?
             'block':'none';
                }
        }
}
</script>
</head>
<body>
<?php
$listbox=new class_list;
$show_box=$listbox->display();
?>
</body>

___________________
Nolug mailing list
nolug@nolug.org