|zyciis| 如何来设置table中的td的宽，我用clientWidth FireFox提示：property that has only a gette


<!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>
    <title></title>
</head>
<body>
    <div>
        <table id="tabListHeader" border="1">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    名称
                </td>
            </tr>
        </table>
        <div id="list" style="height: 60px; overflow: auto">
            <table id="tabList" border="1" width="100%">
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Jerry
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Tom.Zhang
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Ryo
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        King
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var tabList = document.getElementById("tabList");
    var tabListHeader = document.getElementById("tabListHeader");
    if (typeof (tabListHeader) == "undefined") {
        throw new Error("表头未定义");
    }
    if (typeof (tabListHeader.rows[0]) == "undefined") {
        throw new Error("表头行未定义");
    }
    if (typeof (tabList) == "undefined") {
        throw new Error("列表未定义");
    }
    //    tabListHeader.style = tabList.style;
    if (tabList.rows.length > 0) {
        //alert(tabList.rows[0].cells.length);
        for (var i = 0; i <= tabList.rows[0].cells.length - 1; i++) {
            //alert(tabList.rows[0].cells[i].clientWidth);
            if (typeof (tabListHeader.rows[0].cells[i]) == "undefined") {
                throw new Error("列头未定义");
            }
            else {
                var tdWidth = tabList.rows[0].cells[i].clientWidth;
                var tdHeaderWidth = tabListHeader.rows[0].cells[i].clientWidth
                alert(tdWidth);
                alert(tdHeaderWidth);
                if (tdWidth > tdHeaderWidth) {
                    //tabListHeader.rows[0].cells[i].clientWidth = tdWidth;
                    tabListHeader.rows[0].cells[i].style.width = tdWidth + "px";
                }
                else {
                    //tabList.rows[0].cells[i].clientWidth = tdHeaderWidth;
                    tabList.rows[0].cells[i].style.width = tdHeaderWidth + "px";
                }
            }
        }
    }    
</script>以上是我自己用js写表头的代码，但是有几个地方不太理想，大家帮看看
还有怎么写更好，
如上面
tabListHeader.style = tabList.style;
这一句我的想法是将列表的样式全都赋值给表头，
但提示Style为只读，那这里要怎么写呢？
tabList.rows[0].cells[i].style.width = tdHeaderWidth + "px";
这种写法的话他的宽有问题
而我用
tabList.rows[0].cells[i].clientWidth = tdHeaderWidth;
也是提示说clientWidth为只读
那应该怎么写呢？谢谢

解决方案 »

  1.   

    把你的style定义成css
    <style type="text/css"> .list
    {
    height: 60px; 
                    overflow: auto
    }
    </style> <div id="list" class="list">tabListHeader.className = tabList.className; 
      

  2.   

    晕，我是用firefox测试的，用IE看，我的滚动条都没有出来
      

  3.   


    <!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>
        <title></title>
        <style type="text/css">
            html, body
            {
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <div>
            <table id="tabListHeader" border="1" cellspacing="0">
                <tr>
                    <td>
                        ID
                    </td>
                    <td>
                        名称
                    </td>
                </tr>
            </table>
            <div id="list" style="height: 60px; width: 100%; overflow: auto">
                <table id="tabList" border="1" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Jerry
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Tom.Zhang
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Ryo
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            King
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var tabList = document.getElementById("tabList");
        var tabListHeader = document.getElementById("tabListHeader");
        if (typeof (tabListHeader) == "undefined") {
            throw new Error("表头未定义");
        }
        if (typeof (tabListHeader.rows[0]) == "undefined") {
            throw new Error("表头行未定义");
        }
        if (typeof (tabList) == "undefined") {
            throw new Error("列表未定义");
        }
        //    tabListHeader.style = tabList.style;
        if (tabList.rows.length > 0) {
            //alert(tabList.rows[0].cells.length);
            for (var i = 0; i <= tabList.rows[0].cells.length - 1; i++) {
                //alert(tabList.rows[0].cells[i].clientWidth);
                if (typeof (tabListHeader.rows[0].cells[i]) == "undefined") {
                    throw new Error("列头未定义");
                }
                else {
                    var tdWidth = tabList.rows[0].cells[i].clientWidth;
                    var tdHeaderWidth = tabListHeader.rows[0].cells[i].clientWidth
                    alert(tdWidth);
                    alert(tdHeaderWidth);
                    if (tdWidth > tdHeaderWidth) {
                        //tabListHeader.rows[0].cells[i].clientWidth = tdWidth;
                        tabListHeader.rows[0].cells[i].style.width = tdWidth - 2 + "px";
                    }
                    else {
                        //tabList.rows[0].cells[i].clientWidth = tdHeaderWidth;
                        tabList.rows[0].cells[i].style.width = tdHeaderWidth - 2 + "px";
                    }
                }
            }
        }    
    </script>以上代码在FireFox中，可以实现我要的效果，
    但是在IIS中的滚动条不见了，
    麻烦大家指定如何改可以兼容FireFox IE6,7,8谢谢