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

我正在从ajax响应中动态生成表的行。表头是静态的/常量。我终于写这个到一个页面上的div。将动态生成的表插入div的问题

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

我试着从行中分离标题/列，但是我面对的问题很宽，即行td大小与标题不匹配。这里是我的代码（示例代码）：

我想让它在IE7和FF中工作。

<!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>

请帮忙。您的帮助将不胜感激。由于

来源

2011-12-29 Nomad

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

来源

2011-12-29 23:27:42 powerbuoy

感谢您的回答。 – Nomad 2011-12-29 23:35:09

你要玩的CSS有点

看看这个：

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

来源

2011-12-29 23:25:37 smnbss

我该如何使用它？ – Nomad 2011-12-29 23:33:08

@Nomad右键单击查看源代码，这里是我尝试使用纯CSS表格http://jsfiddle.net/dKEy5/ – 2011-12-30 00:00:53

@Tom Ingram谢谢但单元格没有与头部对齐。如果我想要10个标题怎么办？ – Nomad 2011-12-30 17:55:41

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

回答

相关问题