[Javascript] scrollable TABLE BODY while the HEADER is fixed
Andrew Gibson
andyg at ihug.co.nz
Mon Feb 11 15:42:03 CST 2002
Any chance of providing a url? Might be nice to see it in action!
> > >>How can I provide a scrollable TABLE BODY while the HEADER and FOOTER
is
> > fixed for IE???
> >
> >
> > I've been working on the same problem this week and was hoping someone
> else
> > had a good answer for both of us. What I've done is a work-around, but
> not
> > quite bad enough to call it a cheat.
> >
>
>
> Hi Jacoby,
> I write you again, because I improved the code I sent the last time and
now
> I can make a table (with static header) with height and width that I want
> and I can have other HTML objects upper, above, on the left side and on
the
> right side of the table. Of course, it is not perfect: it has a little
> flickering on horizontal scrolling and, if the right side of the header
that
> is hidden (it is longer than the with of the seen table) is too large,
then
> you will have an horizontal scrollbar on the frame. But I consider these
to
> be little disadvantages, so, I think this kind of table can be
successfully
> used. I worked a lot for this code, so I hope you will find it useful.
>
>
> <html>
> <head>
> <title> Test </title>
> </head>
>
> <script>
>
> // rows number:
> var rowNum = 20;
>
> // columns number:
> var colNum = 12;
>
> // table width:
> var tabWidth = 800;
>
> // Array that holds the columns width
> var arrTDwidth = new Array (77, 31, 71, 113, 52, 53, 41, 64, 55, 90, 70,
> 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120,
> 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12,
> 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 200, 80,
> 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70,
> 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 200, 80, 70, 180,
> 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23,
50,
> 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 200, 80, 70, 180, 12, 90, 70,
14
> 5, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120,
200,
> 80, 70, 180, 12, 90, 70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50,
30,
> 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180,
> 12, 90, 70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200,
> 80, 70, 180, 12, 90, 70);
>
>
> // function that create the table
> function drawTab (rows, cols, color, id)
> {
> sHTML = "<TABLE id='"+id+"' bgcolor='"+color+"' border=1
> style='tableLayout:fixed'>";
> count=0;
>
> sHTML += "\n<THEAD id='downTblHead'>\n";
>
> i=0;
>
> for (var j=0; j < cols; j++)
> {
> width = arrTDwidth;
> sHTML += "<TH id='a0"+j+"' ONCLICK='alert(this.offsetWidth)' nowrap
> style='word-wrap: break-word;' style='width:"+arrTDwidth[count]+"pt;'>this
> is cell: Row"+i+"Col"+j+"</TH>";
> count++;
> }
> count = 0;
>
> sHTML += "\n</THEAD>\n";
>
>
> sHTML += "\n<TBODY>\n";
>
>
> for (var i=1; i<rows; i++)
> {
> sHTML += "\n<TR>\n";
>
> for (var j=0; j<cols; j++)
> {
> width = arrTDwidth;
> sHTML += "<TD id='a"+i+j+"' style='word-wrap:
> break-word;'ONCLICK='alert(this.offsetWidth)' nowrap style='word-wrap:
> break-word;' style='width:"+arrTDwidth[count]+"pt;'>this is cell:
> Row"+i+"Col"+j+"</TD>";
> count++;
> }
> count = 0
> sHTML += "\n</TR>\n";
> }
>
> sHTML += "\n</TBODY>\n";
> sHTML += "\n</TABLE>";
>
> return sHTML;
> }
>
>
> // function that clones the real header and changes the original IDs (for
> not duplicate any IDs).
> function cloneHeader ()
> {
> // adding scrollBar width to the dataContainer div
> document.all['dataContainer'].style.width =
> document.all['data'].offsetWidth + getScrollBraWidth ();
>
> // adding scrollBar width to the dataContainer div
> document.all['headerContainer'].style.width =
> document.all['data'].offsetWidth;
>
> // clone header
> var x = document.all['downTblHead'].cloneNode(true);
>
> // changing orig. IDs
> for (var j = 0; j < colNum; j++)
> {
> document.all['a0'+j].id = 'head'+j;
> }
>
> document.all['downTblHead'].id = "downTblHead4hidden";
>
> // adding the cloned header to the upper table.
> document.all['upTbl'].appendChild (x);
>
>
> document.all['upTbl'].width =
> document.all['downTblHead4hidden'].offsetWidth;
>
> fitTab ();
> synchronizeHeader ();
> }
>
>
>
> // function that synchronize
> function synchronizeHeader ()
> {
> var ok = true;
> var max = 0;
>
> // the table may not synchronize at first time; if not, I repeat the
> procedure (maximum 20 times)
> while (ok && max < 20)
> {
> max++;
> ok = false;
>
> for (var j = 0; j < colNum; j++)
> {
> if (document.all['a0'+j].offsetWidth !=
> document.all['head'+j].offsetWidth)
> {
> ok = true;
> //alert ("before: \n" + document.all['a0'+j].offsetWidth + "\n" +
> document.all['head'+j].offsetWidth);
> document.all['a0'+j].style.width = document.all['head'+j].offsetWidth;
> //alert ("after: \n" + document.all['a0'+j].offsetWidth + "\n" +
> document.all['head'+j].offsetWidth);
> }
> }
> }
>
> }
>
>
>
> // reading the scrollBars width (depending on the OS settings).
> function getScrollBraWidth ()
> {
> try
> {
> var elem = document.createElement("DIV");
> elem.id = "asdf";
> elem.style.width = 100;
> elem.style.height = 100;
> elem.style.overflow = "scroll";
> elem.style.position = "absolute";
> elem.style.visibility = "hidden";
> elem.style.top = "0";
> elem.style.left = "0";
>
> document.body.appendChild (elem);
>
> scrollWidth = document.all['asdf'].offsetWidth -
> document.all['asdf'].clientWidth;
>
> document.body.removeChild (elem);
> delete elem;
> }
> catch (ex)
> {
> return false;
> }
>
> return scrollWidth;
> }
>
>
>
> function findPosX (obj)
> {
> var curleft = 0;
>
> // go into a loop that continues as long as the object has an
offsetParent
> while (obj.offsetParent)
> {
> // add the offsetLeft of the element relative to the offsetParent to
> curleft and set the object to this offsetParent
> curleft += obj.offsetLeft
> obj = obj.offsetParent;
> }
> return curleft;
> }
>
>
> // setting the table width (tabWidthpx) and cutting the header as it is
> necesarry
> function fitTab ()
> {
> document.all['dataContainer'].style.width = tabWidth + getScrollBraWidth
> ();
> document.all['headerContainer'].style.clip = "rect (auto, "+tabWidth+"px,
> auto, auto)";
> }
>
>
> // synchronize the header when horizontal scrolling
> function headingUpdate()
> {
> document.all['headerContainer'].style.left
> = -document.all['dataContainer'].scrollLeft + findPosX
> (document.all['data']);
> document.all['headerContainer'].style.clip = "rect (auto,
> "+(tabWidth+document.all['dataContainer'].scrollLeft)+"px, auto,
> "+document.all['dataContainer'].scrollLeft+")";
> }
>
>
>
> </script>
>
> <body bgcolor="#000000", text="#ffffff" onLoad="cloneHeader ();">
>
>
> <TABLE>
> <TR>
> <TD colspan=3>text upper the table .... .......... .......... ..........
> .......... .......... .......... .......... .......... ......<TD>
> <TR>
> <TR>
> <TD>text on the left side .... .......... .......... ..........
..........
> .......... .......... .......... .......... ......<TD>
> <TD>
> <div id="headerContainer" style="position: absolute; z-index:2;">
> <TABLE id='upTbl' bgcolor='gray' border=1 style="tableLayout:fixed">
> </TABLE>
> </div>
>
> <div id="dataContainer" style="height:600;overflow:scroll; z-index:1;"
> onScroll="headingUpdate()">
> <script language="JavaScript">
> <!--
> // writting the table
> document.write (drawTab (rowNum, colNum, "", "data"));
>
> //-->
> </script>
> </div>
> </TD>
> <TD>text on the right side .... .......... .......... ..........
> .......... .......... .......... .......... .......... ......<TD>
> </TR>
>
> <TR>
> <TD colspan=3>text above the table .... .......... .......... ..........
> .......... .......... .......... .......... .......... ......<TD>
> </TR>
> </TABLE>
>
> </body>
> </html>
>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
More information about the Javascript
mailing list