新手 关于js如何可以实现树状结构，外框必须带table tr td的html!!! 马上给分

Question

把你的HTML代码结构贴出来看看...

Answer 1

用dtree实现树状结构

Answer 2

{foreach item=nendo from=$data.list|smarty:nodefaults key=keynendo}
{foreach item=kamoku from=$nendo|smarty:nodefaults key=keykamoku}
{foreach item=ls from=$kamoku|smarty:nodefaults key=keyls}
{if $ls.project_id eq ""}
    <tr class="listrecord" >
{else}
    <tr class="listrecord" onmouseover="this.className='liston'" onmouseout="this.className='listrecord'">
{/if}
{if $keykamoku eq '1' && $keyls eq '1'}
      <td width="1%" align="left" nowrap>{$keynendo}年度</td>
{else}
      <td width="1%" align="left" nowrap>&nbsp;</td>
{/if}
{if $keyls eq '1'}
      <td width="1%" align="left" nowrap>{$ls.str_kamoku}</td>
{else}
      <td width="1%" align="left" nowrap>&nbsp;</td>
{/if}
      <!--td width="1%" align="left" nowrap>{$ls.str_kubun}</td-->
      <td align="right" nowrap><span class="{$ls.goukei_color|default:"txt12"}">{$ls.goukei|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_1_color|default:"txt12"}">{$ls.mon_1|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_2_color|default:"txt12"}">{$ls.mon_2|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_3_color|default:"txt12"}">{$ls.mon_3|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_4_color|default:"txt12"}">{$ls.mon_4|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_5_color|default:"txt12"}">{$ls.mon_5|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_6_color|default:"txt12"}">{$ls.mon_6|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_7_color|default:"txt12"}">{$ls.mon_7|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_8_color|default:"txt12"}">{$ls.mon_8|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_9_color|default:"txt12"}">{$ls.mon_9|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_10_color|default:"txt12"}">{$ls.mon_10|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_11_color|default:"txt12"}">{$ls.mon_11|custom_number_format}</span></td>
      <td align="right" nowrap><span class="{$ls.mon_12_color|default:"txt12"}">{$ls.mon_12|custom_number_format}</span></td>
    </tr>
{/foreach}
{/foreach}
{foreachelse}
  <tr class="listrecord">
    <td colspan="16" align="center">{$smarty.const.PBMS_ERR_SEARCH_NODATA}</td>
  </tr>
{/foreach}是PHP的 "<td width="1%" align="left" nowrap>{$keynendo}年度</td>" 这个就是第一个td我会在他前面再加一个td里面用来放+ - 图片 然后点击+,-号就会在每行夫数据下 显示子叶  是否有js可以实现

Answer 3

function FTree( oParent )
    {
        this.myparent   = oParent;
        var myself      = this;
        var picUrl      = "imgs/";
        var treeStyle   = new Array();
        var picTop      = 0;
        var isIE        = false;
        this.doc;
        
        var textnode    = '\
            <table name="textnode" width="100%" border="0" cellspacing="0" cellpadding="0"><!-- 文本型节点 -->\n\
                <tr  height="18">\n\
                  <td>\n\
                      <div name="tag_bg"><!-- 背景 -->\n\
                        <img name="tag" /><!-- 前景 -->\n\
                      </div>\n\
                  </td>\n\
                  <td nowrap="nowrap" width="100%">\n\
                      <div name="doc_bg"><img name="doc" /></div><!-- 图标 -->\n\
                      <div name="text">&nbsp;</div><!--文本-->\n\
                  </td>\n\
                </tr>\n\
            </table>\n\
            ';
        
        var doctnode    ='\n\
            <table name="doctnode" width="100%" border="0" cellspacing="0" cellpadding="0" ><!-- 文本型节点 -->\n\
                <tr height="18">\n\
                  <td>\n\
                      <div name="tag_bg"><!-- 背景 -->\n\
                        <img name="tag" /><!-- 前景 -->\n\
                      </div>\n\
                  </td>\n\
                  <td nowrap="nowrap" width="100%">\n\
                      <div name="doc_bg" ><img name="doc" /></div><!-- 图标 -->\n\
                      <div name="text">&nbsp;</div><!--文本-->\n\
                  </td>\n\
                </tr>\n\
                <tr name="childbox" style="">\n\
                  <td name="null_bg">&nbsp;</td>\n\
                  <td name="child" ></td>\n\
                </tr>\n\
            </table>\n\
            ';
        //-------------------------------------------------------------------------------------------
        function getEleByName( tobj, stagName, sname )
        {
            if(!tobj || tobj.nodeType!=1)return null;
            var otd = tobj.getElementsByTagName(stagName);
            for( var i=0 ;i<otd.length;i++ )
            {   if( otd[i].getAttribute("name") == sname )
                    return otd[i];
            }
            return null;
        }
        //-------------------------------------------------------------------------------------------
        this.newRoot = function( toParent )
        {
            var firstyle = treeStyle["tag_last"];
            var osibling = toParent.childNodes;
            if( osibling.length == 0 )
                firstyle = treeStyle["tag_first"];
            else
            if( osibling.length >= 1 )
            {   var oPre  = osibling[osibling.length-1];
                if( osibling.length > 1 )
                    getEleByName( oPre, "div",   "tag_bg" ).style.cssText = treeStyle["tag_midst"];
                if( getEleByName( oPre, "TD",   "null_bg" ) )
                    getEleByName( oPre, "TD",   "null_bg" ).style.cssText = treeStyle["null_bg"];
            }
            
            var odoc = document.createElement( "DIV" );
            toParent.appendChild( odoc );
            odoc.innerHTML = doctnode;
            getEleByName( odoc, "div",   "tag_bg" ).style.cssText   = firstyle;
            getEleByName( odoc, "img",   "tag"    ).src             = picUrl+"close.gif";
            getEleByName( odoc, "div",   "doc_bg" ).style.cssText   = treeStyle["null"];
            getEleByName( odoc, "img",   "doc"    ).src             = picUrl+"doc_close.gif";
            getEleByName( odoc, "div",   "text"   ).style.cssText   = treeStyle["text"];
            getEleByName( odoc, "div",   "text"   ).innerHTML       = "docs";
            getEleByName( odoc, "TD",    "null_bg").style.cssText   = treeStyle["null"];
            var orow = odoc.getElementsByTagName("TABLE")[0].rows[0];
            orow.onclick = function()
            {   
                var cbox = getEleByName( odoc, "TR",   "childbox"   );
                if( cbox.style.display == "none" )
                {   getEleByName( odoc, "img",   "tag"    ).src = picUrl+"open.gif";
                    getEleByName( odoc, "img",   "doc"    ).src = picUrl+"doc_open.gif";
                    cbox.style.display = "";
                    
                }
                else
                {   getEleByName( odoc, "img",   "tag"    ).src = picUrl+"close.gif";
                    getEleByName( odoc, "img",   "doc"    ).src = picUrl+"doc_close.gif";
                    cbox.style.display = "none";
                }
            }
            orow.cells[1].onmouseover = function()
            {
                orow.cells[1].bgColor = "#EBEBEB";//#D2F0FF//#EBEBEB
            }
            orow.cells[1].onmouseout = function()
            {
                orow.cells[1].bgColor = "";
            }
            var ochild = getEleByName( odoc, "td",   "child"    );
            ochild.addroot = function(){ return myself.newRoot(this); };
            ochild.addtext = function(){ myself.newNode(this); };
            return ochild;
        }
        //-------------------------------------------------------------------------------------------
        this.newNode = function( toParent )
        {   var firstyle = treeStyle["tag_last"];
            var osibling = toParent.childNodes;
            if( osibling.length == 0 )
                firstyle = treeStyle["tag_first"];
            else
            if( osibling.length >= 1 )
            {   var oPre  = osibling[osibling.length-1];
                if( osibling.length > 1 )
                    getEleByName( oPre, "div",   "tag_bg" ).style.cssText = treeStyle["tag_midst"];
                if( getEleByName( oPre, "TD",   "null_bg" ) )
                    getEleByName( oPre, "TD",   "null_bg" ).style.cssText = treeStyle["null_bg"];
            }
            
            var odoc = document.createElement("DIV");
            toParent.appendChild( odoc );
            odoc.innerHTML = textnode;
            getEleByName( odoc, "div",   "tag_bg" ).style.cssText = firstyle;
            getEleByName( odoc, "img",   "tag"    ).src = picUrl+"tag_last.gif";
            getEleByName( odoc, "div",   "doc_bg" ).style.cssText = treeStyle["null"];
            getEleByName( odoc, "img",   "doc"    ).src = picUrl+"doc_file.gif";
            getEleByName( odoc, "div",   "text"   ).style.cssText = treeStyle["text"];
            var orow = odoc.getElementsByTagName("TABLE")[0].rows[0];
            getEleByName( odoc, "div",   "text"   ).style.width = (orow.cells[1].offsetWidth -20) +"px";
            getEleByName( odoc, "div",   "text"   ).innerHTML = "text";
            orow.onclick = function()
            {
                //alert("");
            }
            orow.cells[1].onmouseover = function()
            {
                orow.cells[1].bgColor = "#EBEBEB";//#D2F0FF//#EBEBEB
            }
            orow.cells[1].onmouseout = function()
            {
                orow.cells[1].bgColor = "";
            }
        }
        

Answer 4

//-------------------------------------------------------------------------------------------
        var tree_init = function()
        {   var indx = 0;
            if( window.navigator.appName.indexOf("Microsoft") != -1 )
                isIE = true;
            else
                picTop = 0;
                
            treeStyle["text"]="\n\
             height: 18px;\n\
             font-family: Arial, Helvetica, sans-serif;\n\
             font-size: 12px;\n\
             overflow-x: hidden;\n\
             line-height: 18px;\n\
             cursor: default;\n\
             display: inline-block;\n\
             float: left;\n\
             ";
            
            treeStyle["null_bg"]="\n\
             background-image:url("+picUrl+"tag_line_y.gif);\n\
                ";
                
            treeStyle["null"]="\n\
             width: 16px;\n\
             height: 18px;\n\
             clear: left;\n\
             float: left;\n\
                ";
                
            treeStyle["tag_line_x"]="\n\
             width: 16px;\n\
             height: 18px;\n\
             background-image:url("+picUrl+"tag_line_x.gif);\n\
             clear: left;\n\
             float: left;\n\
                ";
            
            treeStyle["tag_line_y"]="\n\
             width: 16px;\n\
             height: 18px;\n\
             background-image:url("+picUrl+"tag_line_y.gif);\n\
             background-repeat: repeat-y;\n\
             float: left;\n\
             position:static;\n\
                ";
                
            treeStyle["tag_first"]="\n\
             width: 16px;\n\
             float: left;\n\
             height: 18px;\n\
             background-image:url("+picUrl+"tag_first.gif);\n\
                ";
                
            treeStyle["tag_midst"]="\n\
             width: 16px;\n\
             float: left;\n\
             height: 18px;\n\
             background-image:url("+picUrl+"tag_midst.gif);\n\
                ";
                
            treeStyle["tag_last"]="\n\
             width: 16px;\n\
             float: left;\n\
             height: 18px;\n\
             background-image:url("+picUrl+"tag_last.gif);\n\
                ";
                
            this.doc = document.createDocumentFragment();
        }
        tree_init();
    }

Answer 5

<script src="rtree.js" ></script>
</head>
<body>
<table width="200" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td id="tree_box" >
        </td>
    </tr>
</table>
</body>
</html>
<script>
    
    var oTree = new FTree( document.getElementById("tree_box") );
    var oroot = oTree.newRoot(oTree.myparent);
    oroot.addtext();
    oroot.addtext();
    oroot.addtext();
    oroot.addtext();
    oroot = oroot.addroot();
    oroot.addtext();
    oroot.addtext();
    oTree.newNode(oTree.myparent);
    oTree.newRoot(oTree.myparent);
    oTree.newNode(oTree.myparent);
    oTree.newRoot(oTree.myparent);
    oTree.newNode(oTree.myparent);
</script>正巧我也在写一个用表格堆出来的树,没写完,仅供参考,呵呵;

Answer 6

我的空间里有一个资源是用 MyEclpse 开发的，用层做的，加数据库，实现树状，带复选框，图片面性 + - 号的树状。你可以去下载.看适合你不??全源文件都在里面.