获取tr.style.Display时报对象为空或未定义的错误...

// 切换节点状态(只处理节点的展开/关闭状态)
// toggleBy -- 引发Toggle事件的控件
function TreeGrid_ToggleNodeExpandState(toggleTd, toggleTr, nodeR)
{
    var td;
    var tr;
    td = toggleTd;
    tr = toggleTr;
    
    var nodeC = TreeGrid_GetNodeChildrenRelation(nodeR, true);  // 获得节点所有的子孙节点（不包括自己）（深度遍历）
    if (!nodeC) {return;}    var expand = (nodeR.e == "e") ? false : true;               // 根据节点的状态，判断进行展开还是关闭
    nodeR.e = (nodeR.e == "e") ? "c" : "e";                     // 切换节点的状态
    tr = tr.nextSibling;                                        // 
    var nodeChildrenCount = 0;                                  // 直接子节点数
    
    if (tr && (nodeC.length > 0)) {
        var directChildExpanded = false;
        for (var cIndex = 0; cIndex < nodeC.length; cIndex++) { // 循环--巧妙的循环(各行tr是深度遍历的结果,nodeC也是深度遍历的结果)
            if (!expand) {
                tr.style.display="none";//这里是报错代码                                                 // 切换为关闭状态 -- 设置节点的直接子节点pe = "c".
                //tr.style.display = "none";
                // 只处理直接子节点
                if (nodeChildrenCount == 0) {                   // 第一次时为true，以后每次获得的都是直接子节点的子孙节点的个数。
                    nodeChildrenCount = TreeGrid_GetNodeChildrenCount(nodeC[cIndex]);        // 获得所有子孙节点的个数（不包括自己）
                    //alert(nodeChildrenCount);
                    nodeC[cIndex].pe = "c";
                    //alert("ok" + nodeC[cIndex].pe + nodeC[cIndex].i);
                }
                else {
                    nodeChildrenCount--;                        // -- 处理下个节点。连续跳过，直到遇到下一个直接子节点
                }
            }
            else {                                              // 切换为展开状态 -- 一个子孙节点是否展开，取决于其父节点是否展开(更准确应为祖先节点)(是否有规则保证仅检验父呢?)
                if (nodeChildrenCount == 0) {                   // 直接子节点一定展开
                    nodeChildrenCount = TreeGrid_GetNodeChildrenCount(nodeC[cIndex]);    //alert(nodeChildrenCount);
                    nodeC[cIndex].pe = "e";
                    tr.style.display = "block";
                    
                    // 如果直接子节点是关闭的，那么这个直接子节点的所有子孙，无论父节点是否展开，都不应展开。
                    directChildExpanded = (nodeC[cIndex].e == "e") ? true : false;   // 直接子节点的状态
                }
                else {
                    nodeChildrenCount--;
                    if (directChildExpanded && nodeC[cIndex].pe == "e") {    // 直接子节点是展开的 且 父节点是展开的
                        tr.styledisplay = "block";
                        //tr.style.display = "block";
                    }
                }
            }
            
            if (cIndex < nodeC.length-1) {
                tr = tr.nextSibling;                            // 下一行
            }
        }
        //var checkbox = tr.getElementsByTagName("INPUT");
    }
}以上是在调用改变树节点状态为收起时报的！！十分不解这是为什么......希望得到一些指导。。树节点

解决方案 »

  1.   

    tr.style.display="none" 的写法没有任何问题。问题在于浏览器对于页面的解释不一样，因此tr.nextSibling取出来的内容就不一样。 FF和Chrome会在tr后面自动加一个nodeType是text的节点，该节点不是html元素（nodeType为element），不为空，因此可以通过if判断，但是没有style这个属性，用style.display自然报错。该法也很简单，自己写个方法取下一个trfunction nextElementSibling(el) {
                do { el = el.nextSibling } while (el && el.nodeType !== 1);
                return el;
            }并把 tr = tr.nextSibling;      改成 tr = nextElementSibling(tr); 就可以了当然可以可以尝试加强if判断if (tr && tr.nodeType == 1 && (nodeC.length > 0)) {...}
      

  2.   

    补充一下：上面的解释是机遇两个tr中间有换行的情况，如果<tr></tr><tr></tr>写在一行是没有问题的。貌似大多情况下不会把所有的tr都写在一行吧
      

  3.   

    简单的一个测试页面
    <html>
    <head>
        <script type="text/javascript">
            function test() {
                var tr1 = document.getElementById("tr1");
                
                var tr = tr1.nextSibling;
                alert(tr.nodeName); // IE: TR, Fiefox:#text, Chrome: #text
                
                tr = nextElementSibling(tr1)
                alert(tr.nodeName); // IE: TR, Fiefox:TR, Chrome: TR
            }        function nextElementSibling(el) {
                do { el = el.nextSibling } while (el && el.nodeType !== 1);
                return el;
            }
        </script></head>
    <body>
        <div>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr id="tr1">
                    <td>
                        td 1
                    </td>
                </tr>
                <tr id="tr2">
                    <td>
                        td 2
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Test" onclick="test();" />
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>
      

  4.   

    今天早上搜了一下  貌似IE9不支持 X.style 我就蛋疼了