Question

我正在从我得到的ajax响应动态生成表的行。表头是静态/常量。我终于把它写到了页面上的div。

div有水平和垂直滚动。我的问题是：如果说我有100行，我看不到标题/表格列。我想让它像excel中的冻结窗格，在那里你可以看到标题/列。

我尝试将行/标题/列与行分开，但我遇到的问题很宽，即行td大小与标题不匹配。这是我的代码（示例代码）：

我想让它在IE7和Firefox中运行。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> Some Page </title>
       <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>

     <body>
      <div id="dataDiv" style="white-space:nowrap; overflow-y:scroll; height:330px;overflow: scrollbars-vertical;overflow-x:scroll; width:100%;overflow: scrollbars-horizontal;">
     </body>
    </html>


    <script>


    function ProcessResponse(ajaxResponseData) 
    {

        var dataList = ajaxResponseData.somDataList;



        if(dataList != null)
        {

            var rowData = "<table border='1'  width=1200px>";
            rowData += "<tr>"           
                + "<td colspan='6'><b>Header1</b></td>"
                + "<td colspan='4'><b>Header2</b></td>"
                + "<td colspan='4'><b>Header3</b></td>"
                + "<td colspan='4'><b>Header4</b></td>"
                + "<td colspan='4'><b>Header5</b></td>"
                + "<td colspan='4'><b>Header6</b></td>"
                + "<td colspan='4'><b>Header7</b></td>"
                + "<td colspan='4'><b>Header8</b></td>"
                + "<td colspan='4'><b>Header9</b></td>"
                + "<td colspan='4'><b>Header10</b></td>"
                + "<td colspan='4'><b>Header11</b></td>"
                + "<td colspan='4'><b>Header12</b></td>"
                + "<td colspan='4'><b>Header13</b></td>"
                +"</tr>";




            for(var i=0;i<dataList.length;i++)
            {
                var someRowData=new Object();
                someRowData = dataList[i];


                rowData+="<tr>"             
                +"<td colspan='6'>"
                +someRowData.Header1_data+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                +"</td><td colspan='4'>"
                +someRowData.Header2_data
                +"</td><td colspan='4'>"
                +someRowData.Header3_data
                +"</td><td colspan='4'>"
                +someRowData.Header4_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header5_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header6_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header7_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header8_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header9_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header10_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header11_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header12_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header13_data  
                +"</tr>";
            }
            rowData+="</table>";


            var dataDiv=document.getElementbyId("dataDiv");

            if(dataList.length == 0)
            {

                dataDiv.innerHTML="";
            }   
            else    
            {           
                dataDiv.innerHTML=rowData;
            }   

        }

    }
    </script>

请帮忙。我们将不胜感激。感谢

Answer 1

您需要做的是将overflow: auto;设置为tbody元素而不是div（并将th元素保留在thead元素中。除了Firefox之外，这不会起作用（没有一些调整/黑客攻击）（也许Opera也是如此 - 不确定）。检查提供的@smnbss链接，您应该解决它。最大的问题是，如果您希望它在所有浏览器中都有效，您必须为所有单元格设置固定宽度。

Answer 2

你必须用css玩一点

看看这个：

http://www.imaputz.com/cssStuff/bigFourVersion.html

将动态生成的表插入div的问题

2 个答案: