请问：M$的TreeView Webcontrol的htc里为何用div而不是Table来实现树？

div随意、方便、显示的速度快、可以任意缩进table嵌套多的话，显示的速度很慢，缩进不好控制，不能用多个td，用的话就没法列对齐了。总之，div很方便了。

jyk的话不敢赞同。我不知道jyk有没有看过微软的treeview.htc。微软的做法，div本身并不缩进的。它采用在div里，填上图片的方法来产生缩进的效果。用td一样可以这样缩进。div只做树是可以的，但是如果做多列的树，各列对齐是一个大问题。

我没有看过，但是我自己做了一个树。我的树就是用DIV画的，用css来控制缩进，很方便的，如果用表格的话，那也只能用一列，而不能用多列，既然这样的话，那为什么还要用表格呢？

用Table的话，可以自动列对齐，就可以实现一个行间分层次的Table，或者说，每个节点带好几个可显示的属性每个属性占一列的树了。为什么微软没有这样做呢？==================================你用Table要怎么做呢？另外你说的多列的树是甚么呢？树需要多列吗？只实现缩进就可以了吧？

trojansckiss的意见似乎也可商榷，首先，m$的树不是隐藏的，他每次都自动生成的。其次，table隐藏、显示控制也很方便啊，tr的display设成"none"或者""就可以了。jyk我想你用过微软的编程界面吧，属性窗口分为三列，“变量名”、“值”，和“类型”，而变量如果是一个对象，则可以展开，如果他的某个属性还是一个对象，则可以继续展开，这就是一个多列的树。

可以到我的网站www.jyklzz.nethttp://www.jyklzz.net/tree/tree.aspx这里是我做的一个树的模型，我美工很差，所以页面很惨了:)但是基本功能有了，就是用DIV + CSS + JS 来实现的。你说得多列是不是我说的缩进呀。用DIV的话是
<div>  ......</div>
<div>  ......</div>
<div>  ......</div>
<div>  ......</div>
...而用table的话是
<table>
  <TR>
    <TD> ......</TD>
  </TR>
  <TR>
    <TD> ......</TD>
  </TR>
  <TR>
    <TD> ......</TD>
  </TR>
...
</table>或者是
<table>
  <TR>
    <TD> ......</TD>
  </TR>
</table>
<table>
  <TR>
    <TD> ......</TD>
  </TR>
</table>
<table>
  <TR>
    <TD> ......</TD>
  </TR>
</table>
...显然后者很浪费，只能用前者（在用Table 的时候）
而且只能用一列（一个<TD>）,不能用多个。你可以试一下用多个<TD>是什么情况。这样一比较的话，你还会用table吗？table的优势完全体现不出来。

你说的是什么地方？一般常用的树都是一列的吧？一列的树用DIV多列的树用Table、DataGrid等等，根据需要来定了。

jyk，缩进怎么可能是多列呢，拜托能否在发言之前先听明白对方的意思。不然南辕北辙，只会越扯越远。我要的是这个效果：http://www.16play.com/album/images/2005-02-10/132640.gif

用tabel做树，效率上要比div差，生成一行至少要一个tr 一个td,div 只要一个即可

>>用tabel做树，效率上要比div差，生成一行至少要一个tr 一个td,div 只要一个即可是这样的吗，有人验证过吗？

这还用验证吗,
table里加一行，<table><tr><td>内容</td></tr></table>
div <div><div>内容</div></div>,
================================
to: jyk(喜欢编程。和气生财。共同提高。共同进步)
sorry 刚才解答时没看回复，我有抄袭之嫌。

这还用验证吗,
table里加一行，<table><tr><td>内容</td></tr></table>
div <div><div>内容</div></div>,===========================开玩笑，当然需要验证，不是说html内容字节数长就慢的，同样字节的一个iframe，一个div，你估摸着谁快？

iframe慢是因为 src=....

>>iframe慢是因为 src=....这个已经跑题了……

我对javascript不熟，不然我可以帮你测试一下，一个1000行的table 和1000个div 看看谁快不久知道了

to hdt(接分接出个星星)这个是英雄所见略同，是我们的看法不谋而合。这和抄袭是没有关系的。

我对javascript不熟，不然我可以帮你测试一下，一个1000行的table 和1000个div 看看谁快不久知道了==========================结构简单的一样，复杂的就不好测试了。但是table要比div多占用空间（字节数），多出了9K。

>>不用嵌套表很难表示层次。用了嵌套.......................hdt你到底有没有看过微软的Treeview.htc啊，他的div并没有嵌套，一样表示层次，改用Table只是利用多td表示多列，行与行之间的层次，还是在第一个td里，仿照div表示层次嘛，那里需要嵌套呢……

用table , 不用嵌套,这样?
<tr>
   <td>父节点</td>
   <tr>
     <td>子节点 </td>
     <tr>
          <td>孙节点</td>
     </tr>
   <tr>

<tr>

//
// buildTree()
//
// Recursively traverses the
// parsed TREEVIEW tree and creates the document tree of nested
// DIVs for the viewlink.
//
// root: Root node of the subtree to build
// level: level of the tree
//
// returns: created subtree
//
function buildTree(root, level)
{
    var display = true;
    if (root.subtree != null && root.subtree.style.display == "none")
        display = false;

    root.detachEvent("onclick", DefaultNodeOnClick);
    root.attachEvent("onclick", DefaultNodeOnClick);

    // clear all cached values for this node
    root.inheritedType = undefined;
    root.nodetypeIndex = undefined;    // process expandLevel
    var exp = makeBoolean(root.getAttribute("expanded"));
    if (exp == null)
    {
        if (level < element.getAttribute("ExpandLevel"))
        {
            root.setAttribute("expanded", true, 0);
            exp = true;
        }
        else
            exp = false;
    }

    //
    // convert string values to boolean
    //
    if (!verifyBooleanAttribute(root, "expanded"))
        root.setAttribute("expanded", false, 0);
    if (!verifyBooleanAttribute(root, "checked"))
        root.setAttribute("checked", false);
    verifyBooleanAttribute(root, "checkBox");
    verifyBooleanAttribute(root, "checkedExpandable");

    if (root.getAttribute("type") != null)
        root.setAttribute("type", root.getAttribute("type").toLowerCase(), 0);
    if (root.getAttribute("childType") != null)
        root.setAttribute("childType", root.getAttribute("childType").toLowerCase(), 0);

    // Create this node first
    var collChildren = root.children.tags("treenode");
    var iChildren = collChildren.length;
    var expandable = getNodeAttribute(root, "expandable");
    if (expandable == null && root.getAttribute("TreeNodeSrc") != null)
        expandable = "checkOnce";
    if (root.getAttribute("_bound") != "binding")
    {
        var subtree = generateItem(root, iChildren > 0 || (expandable == "always" || (expandable == "checkOnce" && root.getAttribute("checkedExpandable") != true)) ? "parent" : "child");
        if (display == false)
            subtree.style.display = "none";

        if (exp == true && root.getAttribute("TreeNodeSrc") != null && root.getAttribute("_bound") != "complete")
        {
            // Databind.  When databinding is finished, this subtree will be built automatically
            root.setAttribute("expanded", true, 0);
            saveSubtree(root, subtree);
            databindNode(root);
        }
        else
        {
            // Create children
            if (root.getAttribute("expanded") == true)
            {
                for (var i = 0; i < iChildren; i++)
                {
                    collChildren[i].sibIndex = i;
                    var sub2 = buildTree(collChildren[i], level + 1);
                    if (sub2 != undefined)
                        subtree.appendChild(sub2);
                }
            }
            else
            {
                for (var i = 0; i < iChildren; i++)
                {
                    if (collChildren[i].getAttribute("subtree") != null)
                        collChildren[i].subtree = null;
                }
            }
            saveSubtree(root, subtree);
        }
    }

    return root.subtree;
}
你好好看看吧。

hdt(接分接出个星星)，不懂就闭嘴，不要乱扯。你贴的是微软的treeview.htc中buildtree函数，我早就看过啦。可惜的是，这部分，是构造树的逻辑结构的地方，好吗，真正写树每个节点的，是它调用的generateItem函数，generateItem里面，再通过addLinesAndWhitespace(node, el, junctionNode); 来创建每个树节点前的竖线、图标、空白，来控制缩进。微软的树，每个节点（包括前面的竖线、图标、空白）就是一个div，各div之间根本没有层次，是平行的。用table，一样可以这样做，只不过把每个div换成每个tr的第一个td，然后后面的td就可以表示多列的数据了。ok?

//
// buildTree()
//
// Recursively traverses the
// parsed TREEVIEW tree and creates the document tree of nested
// DIVs for the viewlink.
//
// root: Root node of the subtree to build
// level: level of the tree
//
// returns: created subtree
//
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
不知谁不懂张大你的眼睛，注释里明确告诉你用nest div ，另外在程序里用的是appendchild
注意 subtree.appendChild(sub2);
达到嵌套的目的。

怎么吵起来了？
开个玩笑，微软不会是想让自己的控件符合web标准吧

楼主http://www.16play.com/album/images/2005-02-10/132640.gif这个效果当然是用table比较好了。但是web里面很少有这样的应用。

jyk，你做不到就说做不到，不要跑题，说什么少有。

//
// buildTree()
//
// Recursively traverses the
// parsed TREEVIEW tree and creates the document tree of nested
// DIVs for the viewlink.
//
// root: Root node of the subtree to build
// level: level of the tree
//
// returns: created subtree
//
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
不知谁不懂张大你的眼睛，注释里明确告诉你用nest div ，另外在程序里用的是appendchild
注意 subtree.appendChild(sub2);
达到嵌套的目的。======================================必须说你善于读程序的注释，却根本不知道什么是appendChild。appendChild，好像是说加一个Child，其实，这是一个误解。subtree.appendChild(sub2)的结果，表示sub2的DIV并没有嵌套在表示subtree的DIV之中，而是，在其之后。如果你读过treeview.htc的代码，而不是注释，就知道怎么去验证。

hdt，遗憾的是，微软的treeview.htc程序固然写得很好，注释却未必精确。下面这样的一个树Node0
Node4
--Node9
--Node10
--Node11
Node5
Node6
Node7
Node8真正用treeview控件实现之后，它的代码如下，可以看到，DIV都是平行的：<HEAD>
<BASE href=http://localhost/StaffVac/>
</HEAD><BODY style="DIRECTION: ltr"><DIV class=child style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/F.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=selectedstyle id=_tntext style="DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=50,style=0); FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: highlighttext; BACKGROUND-COLOR: highlight; TEXT-DECORATION: none" tabIndex=-1> Node0
</SPAN>
</A>
</A>
</DIV><DIV class=parent style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/Tminus.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess title="Node4 : Use +/- to expand/collapse" tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node4
</SPAN>
</A>
</A><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/T.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1> Node9
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/T.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node10
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/L.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node11
</SPAN>
</A>
</A>
</DIV>
</DIV><DIV class=parent style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/Tplus.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess title="Node5 : Use +/- to expand/collapse" tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node5
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/T.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node6
</SPAN>
</A>
</A>
</DIV><DIV class=parent style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/Tplus.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess title="Node7 : Use +/- to expand/collapse" tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node7
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/L.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node8
</SPAN>
</A>
</A>
</DIV>
</BODY>

哈哈，我自己写的跟微软的思路一样，不过我是用P和span来做，同样是用图片填充，我不用table的原因是因为不想写太多代码，同时我想用table的话，同样一个节点，浏览器要解释table、tr、td三个元素，而用p的话只需要一个，相信速度也快一点，还有一个原因是我的树是可以动态增删节点以及动态加载的，我用p的话可以很好的定位在哪里增删，但用table的话无论是整棵树用一个table还是一个节点用一个table都没那么方便，至于多列的情况我倒没想过

想用table的一个原因是试图显示多列的数据，另外一个原因是想和datagrid一样，做到分页和数据处理（不过是从客户端），直觉上Table分页会方便一些；其构思是整个树一个table，每个节点是一个tr。定位应该是可以做的……但是我不确定table/div应该选择哪一个，出于相信“微软的选择总是有道理的”，所以来问问有过类似经验的选择的理由……谢谢liuzxit，liuzxit看来和微软所见略同了。

athossmth(athos) 我现在确实是做不到，但是在web应用里面也确实是很少用到的。我不知道微软的TreeView在web应用里面能不能实现这样的多列的功能？

to: athossmth(athos)
咱俩看的treeview可能是不一样的东西：
这是我的treeview 客户端的代码
<?XML:NAMESPACE PREFIX=TVNS />
<?IMPORT NAMESPACE=TVNS IMPLEMENTATION="/webctrl_client/1_0/treeview.htc" />
<tvns:treeview id="TreeView1" selectedNodeIndex="0" HelperID="__TreeView1_State__" systemImagesPath="/webctrl_client/1_0/treeimages/" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)">
<tvns:treenode Selected="true">
root<tvns:treenode>
c1<tvns:treenode>
s1
</tvns:treenode><tvns:treenode>
s2
</tvns:treenode>
</tvns:treenode><tvns:treenode>
c2<tvns:treenode>
s1
</tvns:treenode><tvns:treenode>
s2
</tvns:treenode>
</tvns:treenode>
</tvns:treenode>
</tvns:treeview>
另外对嵌套的理解我们可能有出入：
我认为：
<div>
   <div>
      <div>
      </div>
   </div>
</div>
就是嵌套，你的代码也说明的这点。
appendchild 的作用
如果是下面的代码:
<p id="p1"/>
js:
var p1 = document.getElementById("p1");
var text = document.createTextNode("foo");
p1.appendChild(text);
应该是
<p id="p1">foo</p>
而不是
<p...../>foo

div+css定位要比嵌套的table加载的快,也更规范,这个很早就在w3c和css的官方站点上测试与讲过.table是需要全部加载完才会显示.另一方面采用div是为了向w3c标准靠拢

〉〉回复人： hdt(接分接出个星星) ( ) 信誉：98  2005-02-17 09:48:00  得分: 0  〉〉to: athossmth(athos)
〉〉咱俩看的treeview可能是不一样的东西：
︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿
我们看的是一样的东西，只不过你看的是注释，我看的是代码。〉〉这是我的treeview 客户端的代码
<?XML:NAMESPACE PREFIX=TVNS />
<?IMPORT NAMESPACE=TVNS IMPLEMENTATION="/webctrl_client/1_0/treeview.htc" />
<tvns:treeview id="TreeView1" selectedNodeIndex="0" HelperID="__TreeView1_State__" systemImagesPath="/webctrl_client/1_0/treeimages/" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)">
<tvns:treenode Selected="true">
root<tvns:treenode>
c1<tvns:treenode>
s1
</tvns:treenode><tvns:treenode>
s2
</tvns:treenode>
</tvns:treenode><tvns:treenode>
c2<tvns:treenode>
s1
</tvns:treenode><tvns:treenode>
s2
</tvns:treenode>
</tvns:treenode>
</tvns:treenode>
</tvns:treeview>
︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿
唉，这是数据层面的东西，数据层面，当然是嵌套的，但是，我们在讨论div和table的区别，这是表达层面，知道吗？
表达层面的div都是平行的，没有嵌套。当然了，treeview.htc你没有看过代码，只看过注释，不知道怎么得出表达层面的东西，也是可以理解的。treeview的表达层面的结果，微软做成不可读，要想看到，需要小小的改造一下treeview.htc，告诉你，这样做：1、在treeview.htc的<public:component tagname=treeview literalcontent=true>区加入：
<public:property name="TreeviewNode" GET="getTreeviewNode" /> 2、在treeview.htc的<public:component tagname=treeview literalcontent=true>区后加入函数
function getTreeviewNode()
{
return treeviewNode;
}3、在aspx页面加入：
<button id="btn1" onclick='prompt("getTreeviewNode", document.all["TreeView1"].TreeviewNode.innerHTML);' type="button">getTreeviewNode</button>其中，TreeView1是TreeView控件的名字。
〉〉另外对嵌套的理解我们可能有出入：
〉〉我认为：
〉〉<div>
〉〉   <div>
〉〉      <div>
〉〉      </div>
〉〉   </div>
〉〉</div>
〉〉就是嵌套，你的代码也说明的这点。
唉，你真是代码都看不懂，对于嵌套，我们的理解并无区别，但是，我的代码正说明了，div是
<div>
</div>
....
<div>
</div>
的形式，根本没有嵌套！〉〉appendchild 的作用
〉〉如果是下面的代码:
〉〉<p id="p1"/>
〉〉js:
〉〉var p1 = document.getElementById("p1");
〉〉var text = document.createTextNode("foo");
〉〉p1.appendChild(text);
〉〉应该是
〉〉<p id="p1">foo</p>
〉〉而不是
〉〉<p...../>foo
唉，这里你appendChild的是一个string，前面appendChild的是div，怎么可以混为一谈呢？真不知道你那颗星星是怎么来的。

回复人： g_cloud() ( ) 信誉：96 2005-02-17 09:53:00 得分: 0
div+css定位要比嵌套的table加载的快,也更规范,这个很早就在w3c和css的官方站点上测试与讲过.table是需要全部加载完才会显示.另一方面采用div是为了向w3c标准靠拢
︿︿︿︿︿︿︿︿︿︿
g_cloud兄的意见很有道理，请问，能否给一下w3c或css站点上测试结果的地址？非常感谢！回复人： rpdg(road on load) ( ) 信誉：96 2005-02-17 14:03:00 得分: 0
我估计这也就跟今天中饭吃白菜还是青菜一样
随便选了一个而已别太计较这种小事情啦
︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿︿rpdg，不是我计较，是，一、微软这样的庞然大物，做的东西质量还是不错，不得不让我考虑他为何作出某个选择，因我相信它的开发和测试成本是很贵的；二、这个是最开始的选择，如果以后推翻，很多东西就要重头再来，比如，如果弃DIV改用Table，那么不但table部分理所当然要再写，而且所有DIV横向定位的语句全部都白写了。

赞同“采用div是为了向w3c标准靠拢”，其它的俺不懂

athossmth(athos)兄，你是要看看这类的网站吗？http://www.onestab.net/

yic_sword兄，谢谢关注和探讨，如果你说的是这个页面
http://www.onestab.net/seybold/index.html
，嗯，其实我以前看过，我想说我觉得这里的观点有点过时了。它主要的观点是，div+css使页面流量更小、更易维护、站点更易保持风格的一致性、以及格式与数据的分离。事实上，以前或许这是真的，但随着技术的进步，我们可以使用xml+xslt+css的结构，xml+xslt解析出table，然后css定义table的style，这样，一样做到了流量小、易维护、风格一致、及格式与数据分离。

^_^ 星星是接分接来的，本来星星和水平不一定成正比，我也说过我的js水平很臭，htc的东西大前天才开始看.
但是你注意，node4的div包含了node9,node10,node11div,appchild 感觉是你理解不对
<DIV class=parent style="DISPLAY: block" noWrap>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/Tminus.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess title="Node4 : Use +/- to expand/collapse" tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node4
</SPAN>
</A>
</A><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/T.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1> Node9
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/T.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node10
</SPAN>
</A>
</A>
</DIV><DIV class=child style="DISPLAY: block" noWrap>
<IMG height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/I.gif" width=19 align=absMiddle border=0>
<A>
<IMG class=icon height=20 src="/staffvac/script/webctrl_client/1_0/treeimages/L.gif" width=19 align=absMiddle border=0 name=junction>
</A>
<A tabIndex=-1>
<A id=_tnaccess tabIndex=-1>
<SPAN class=defaultstyle id=_tntext style="DISPLAY: inline-block; FONT: 10pt Times; OVERFLOW: hidden; CURSOR: hand; COLOR: black; TEXT-DECORATION: none" tabIndex=-1>Node11
</SPAN>
</A>
</A>
</DIV>
</DIV>//node4的div
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
下面是我做的一个例子，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script language="javascript">
function test()
{
alert("123");
}
function up()
{
debugger;
var d1 = document.getElementById("d1");
var d2 = document.createElement("div");
var text = document.createTextNode("嵌套文字");
d2.appendChild(text);
d1.appendChild(d2);
alert(document.body.innerHTML);
}
</script>
</head><body><input type=button value="haha" onclick="up()"/>
<div id="d1"/></body>
</html>
这里不能贴图，所以我把它放在了网上了，你看看吧

忘了贴网址了
www.caae.com.cn/1.htm

〉〉node4的div包含了node9,node10,node11div,
〉〉appchild 感觉是你理解不对这两点你说的对，是我错了。漏看了div的位置。谢谢纠正了长期以来对appendChild的误解。抱歉前面jyk总是不能理解我的问题，搞得我心情烦躁，出言无状还请见谅。不过回到问题基本面，div到底有什么好处呢？treeview.htc里，div有两个作用，一个是靠内置img等产生缩进，一个是嵌套。前者table一样可以做。后者这个嵌套的结构似乎并没有用到，只是在递归生成的时候方便一些，逻辑清楚；但仅仅是生成的问题的话，如果用table做，只要每次在最后一行后加新行就可以了，似乎也没什么不便？

互相学习，比如你的修改treeview.htc,解决了我以前用js修改文档后不知文档内容的问题。
我感觉你主要不太满意ms的treeview ，
扯个题外话我认为b/s程序，不能对客户端要求太高。我以前不接触htc的原因就是只能ie5以上才能支持。我的用户有的还用 pII + win95呢。我看过太多的程序在高版本机器上用的挺好。结果换了客户端就现了。尤其是给客户的领导看，还认为是拿垃圾来蒙人呢？

table 相比 div 而言用于表示层次、位置的劣势是明显的。
web 标准的推荐是仅仅当显示二维表格的时候才使用 table.
有一个重要的因素是 table 必须加载完全了才显示，在复杂的布局中嵌套表格很容易拖慢整个网页的速度。

采用DIV+CSS并不是说TABLE不能实现,完全是为了为了遵循标准,提高效率与重用性一段翻译:
基于表格的设计表格布局的页面在不同浏览器中看上去都一样。"它象岩石一样坚固"，这是给表格布局的第一评价。然而，当需要修改页面部分内容时，表格布局改起来相当费力。这是一个问题，如果我们使用CMS(内容管理系统)，内容需要被格式化就比较麻烦。整个设计时间有点长，是因为我已经有点遗忘了老方法，如果重新再来一次，我想可能会节省1-2个小时。我形容基于表格的设计是大量"老土的(grunt work)"工作，虽然我经常吃惊于那些高级设计技巧。使用基于纯CSS的设计，我通常习惯于分解设计和逐步分析bug。而用表格设计则不需要这些工作，你只要不断往设计里面扔table就可以了。让我们再来看看CSS的过程。基于CSS的设计用CSS设计的感觉好多了。代码的改变直接而透明，我能清楚得控制整个过程，反观表格的设计就象在垒砖头。页面的改变越大，越感到CSS设计的方便和效率。CSS设计对节省带宽也非常有意义，将所有样式提取出来放在单独的文件中，整个站点用一个或几个样式表文件，可以使整个站点尺寸更小。将布局信息从内容中分离出来，也有许多的好处。在将来，我可以随时改版整个站点而不需要修改任何内容，就象CSS Zen Garden 。同时也增加了易用性，搜索机器人将更加方便发现你的页面(记住：google是你最重要的访客来源)。
一个完全使用table布局的站点()
http://www.w3cn.org/article/translate/2004/cssvstable/table4.htm一个完全使用DIV+CSS布局的站点
http://www.w3cn.org/article/translate/2004/cssvstable/Butterfly_css.htm

调试易

请问：M$的TreeView Webcontrol的htc里为何用div而不是Table来实现树？

解决方案 »