2011-12-29 19 views
0

私が得ている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> 

助けてください。あなたの助けに感謝します。おかげ

答えて

1

あなたがする必要がある何が(むしろあなたdivよりtbody要素にoverflow: auto;に設定されていますあなたのth要素をthead要素に保持してください)。 Firefox以外のもの(これはおそらくOperaでも、わかりません)でも動作しません(微調整/ハッキングなし)。 @smnbssのリンクを確認してください。おそらくそれを解決するべきです。最大の問題は、すべてのブラウザで動作させたい場合は、固定幅をすべてのセルに設定する必要があることです。

+0

あなたの答えをありがとう。 – Nomad

0

あなたは

はこれを見て持っているCSSで少しプレイしている:

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

+0

どうすれば使用できますか? – Nomad

+0

@Nomadを右クリックするとソースが表示されます。ここには純粋なCSSテーブルがありますhttp://jsfiddle.net/dKEy5/ –

+0

@Tom Ingramありがとうございますが、セルがヘッダー付きの例で整列していません。 10個のヘッダーが必要な場合はどうすればよいですか? – Nomad

関連する問題