CODEWITHSUNDEEP
javascripthtml-table
Nomad
Nomad

Reputation: 1102

Issue with inserting dynamically generated table into a div

I am dynamically generating rows of a table from the ajax response I am getting. The table headers are static/constant. I am finally writing this to a div on a page.

The div has both horizontal and vertical scroll. My issue is this: If say I have 100 rows I can't see the headers/table columns. I want to make it like freeze pane in excel, where you can see the headers/columns.

I tried separating the headers/columns from the rows but the issue I face is wide, i.e. the row td size doesn't match up to the headers. Here's my code (sample code):

I want to make it work in IE7 and 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>

Please help. Your help will be appreciated. Thanks

Upvotes: 0

Views: 362

Answers (2)

powerbuoy
powerbuoy

Reputation: 12838

What you need to do is set overflow: auto; to the tbody element rather than your div (and keep your th elements in a thead element). This won't work (without some tweaking/hacking) in anything but Firefox though (maybe Opera as well - not sure). Check the link @smnbss provided and you should probably solve it. The biggest problem is that you have to set fixed width's to all your cells if you want it to work in all the browsers.

Upvotes: 1

smnbss
smnbss

Reputation: 1041

you have to play a little bit with css

have a look at this:

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

Upvotes: 0

Related Questions