Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 19th, 2008, 06:43 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default Table To Grid with Scrolling

Hi,

I do not know if this is something possible to achieve using javascript, CSS, DIV, ..etc and I would be truly grateful is someone could help me to transform a TABLE into a GRID so that users could scroll the TBODY section vertically and horizontally.

When users scrolled horizontally then the TBODY together with the THEAD would scroll under the left section (currently using TH). When they scrolled vertically then the TBODY would go under the THEAD.

I don't even know how to start it and would appreciate some help with the code if possible.

Cheers

P

This is the table:

<html>
<head>
    <title>Table</title>
    <script type="text/javascript" language="javascript">
        function makeGrid()
        {
            var t = document.getElementById("grid")
            var th = document.getElementById("gridHead")
            var tb = document.getElementById("gridBdy")

            alert(th.outerHTML + "\n ==================== \n" + tb.outerHTML)
        }

    </script>
</head>
<body onload="makeGrid()">
<table border="1" id="grid">
  <thead id="gridHead">
    <tr>
      <th rowspan="5" colspan="3"> </th>
      <th colspan="6">Month</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">2006</th>
      <th colspan="4">2007</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">Quarter 4</th>
      <th colspan="4">Quarter 1</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">December</th>
      <th colspan="2">January</th>
      <th colspan="2">February</th>
      <th colspan="2">Total</th>
    </tr>
    <tr>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tbody id="gridBdy">
   <tr>
      <th rowspan="3">Full Name</th>
      <th rowspan="3">Name 1</th>
      <th>A</th>
      <td>1</td>
      <td>5385</td>
      <td>1</td>
      <td>4471</td>
      <td> </td>
      <td> </td>
      <td>2</td>
      <td>9856</td>
    </tr>
    <tr>
      <th>B</th>
      <td>1</td>
      <td>4914</td>
      <td> </td>
      <td> </td>
      <td>1</td>
      <td>5107</td>
      <td>2</td>
      <td>10021</td>
    </tr>
    <tr>
      <th>C</th>
      <td>0.8</td>
      <td>6604</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td>0.8</td>
      <td>6604</td>
    </tr>
    <tr>
      <th rowspan="1"> </th>
      <th rowspan="1"> </th>
      <th>Total</th>
      <td>2.8</td>
      <td>16903</td>
      <td>1</td>
      <td>4471</td>
      <td>1</td>
      <td>5107</td>
      <td>4.8</td>
      <td>26481</td>
    </tr>
  </tbody>
</table>
</body>
</html>
 
Old March 20th, 2008, 01:11 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi pallone!!

I found some links

http://www.javascripttoolbox.com/lib/scrollingdatagrid/
http://www.webreference.com/programm...pt/gr/column4/

Hope this will help you

Cheers :)

vinod
 
Old March 20th, 2008, 06:01 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Vinod,

Thanks. I will have a look at the links.

Cheers

P
 
Old March 20th, 2008, 01:09 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Vinode,

I had a look at the first link and it is promising. The only problem is that it works only in IE. I believe the reason for this is that the CSS to achieve the scrolling is only IE compatible:

/* OffsetParent of the TR is the DIV because it is position:relative */
            DIV.scrollingdatagrid TABLE THEAD TR {
            top:expression(this.offsetParent.scrollTop);
            }
            /* OffsetParent of the THEAD and TFOOT locked column is the TR because it is position:relative */
            DIV.scrollingdatagrid THEAD .locked, DIV.scrollingdatagrid TFOOT .locked {
            left:expression(this.offsetParent.offsetParent.scr ollLeft);
            }
            DIV.scrollingdatagrid TBODY .locked {
            left:expression(this.offsetParent.scrollLeft);
            }
            /* The TFOOT should stick to the bottom of the DIV */
            DIV.scrollingdatagrid TABLE TFOOT TR {
            top:expression(0 - this.offsetParent.scrollHeight + this.offsetParent.clientHeight + this.offsetParent.scrollTop);
            }

Do you think it would be possible to achieve the scrolling using JavaScript? Have you got any ideas on how to do that:

Cheers

P

The Grid

<html>
<head>
    <title>Scrolling Data Grid</title>
<style type="text/css">
/*
Tables inside a scrollingdatagrid should have:
 1. border-collapse:separate
 2. No border or margin
 3. Background colors on all cells to avoid bleed-thru on scroll
 4. cellspacing="0" on the <table> tag itself
*/
DIV.scrollingdatagrid {
    overflow-x:auto;
    overflow-y:auto;
    position:relative;
    padding:0px;
}
DIV.scrollingdatagrid TABLE {
    width : 98.7%; /* Make room for scroll bar! */
    margin:0px;
    border:0px;
    border-collapse:separate;
}
DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
    position:relative;
}
/* OffsetParent of the TR is the DIV because it is position:relative */
DIV.scrollingdatagrid TABLE THEAD TR {
    top:expression(this.offsetParent.scrollTop);
}
/* OffsetParent of the THEAD and TFOOT locked column is the TR because it is position:relative */
DIV.scrollingdatagrid THEAD .locked, DIV.scrollingdatagrid TFOOT .locked {
    left:expression(this.offsetParent.offsetParent.scr ollLeft);
}
DIV.scrollingdatagrid TBODY .locked {
    left:expression(this.offsetParent.scrollLeft);
}
/* The TFOOT should stick to the bottom of the DIV */
DIV.scrollingdatagrid TABLE TFOOT TR {
    top:expression(0 - this.offsetParent.scrollHeight + this.offsetParent.clientHeight + this.offsetParent.scrollTop);
}
/* Make the z-index values very clear so overlaps happen as expected! */
DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
</style>

<style type="text/css">
/* EXAMPLE STYLES FOR EXAMPLE TABLE */
table.example thead th {
    background-color:#ffcccc;
}
table.example tfoot td {
    background-color:#ccffcc;
}
table.example tbody td {
    background-color:#eeeeee;
}
table.example td, table.example th {
    border:1px solid #cccccc;
    border-width:0 1px 1px 0;
}
</style>
</head>
<body>

<div class="scrollingdatagrid" style="width:400px;height:500px;border:1px solid black; left: 0px; top: 0px;">
<table class="example" cellspacing="0">
<thead>

    <tr>
      <th class="locked" rowspan="5" colspan="3" style="background-color:Gray" />
      <th colspan="6">Month</th>
      <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
      <th colspan="2">2006</th>
      <th colspan="4">2007</th>
      <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
      <th colspan="2">Quarter 4</th>
      <th colspan="4">Quarter 1</th>
      <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
      <th colspan="2">December</th>
      <th colspan="2">January</th>
      <th colspan="2">February</th>
      <th colspan="2">Total</th>
    </tr>
    <tr>
      <th >Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
    </tr>

</thead>
<tbody>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>



</tbody>
<tfoot>
    <tr>
      <td class="locked" rowspan="1"></td>
      <td class="locked" rowspan="1"></td>
      <td class="locked">Total</td>
      <td >2.8</td>
      <td >16903</td>
      <td >1</td>
      <td >4471</td>
      <td >1</td>
      <td >5107</td>
      <td >4.8</td>
      <td >26481</td>
    </tr>
</tfoot>
</table>
</div>

</body>
</html>
 
Old March 21st, 2008, 09:12 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Pal,
I will give some other useful links that work with IE and other browsers too.
In mean time have a look on following:

http://webfx.eae.net/dhtml/syncscroll/scrolltable.html
http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
http://webfx.eae.net/dhtml/syncscroll/syncbehavior.html

http://www.stansight.com/sort/LockTableHeadSort.html
http://www.webdeveloper.com/forum/sh...ad.php?t=93850


Cheers :)

vinod
 
Old March 21st, 2008, 02:07 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Vinod,

I had a look at all the links an some others but none of them manage to freeze multiple column and row headers. The example I showed above doest that but unfortunately does not work in IE. I will have to find a way to scroll using javascript I think...

Cheers
 
Old March 27th, 2008, 02:36 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Pal,
I have got the js for this,since file can't be uploaded, you can send ur email so that I can forward it to you.


Cheers :)

vinod
 
Old June 25th, 2008, 02:29 PM
Registered User
 
Join Date: Jun 2008
Location: Toronto, On, Canada.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to romsan
Default

Hi Pallone,

I am running into the problem with scrolling grid. If you have only 2-3 rows of data, IE7 just hangs(100% CPU).

I guess it has something to do with calculating footer position and somehow it crashes....

Any help would be appreciated.

Thank you.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Create table/grid from stored procedure bootsy Classic ASP Basics 0 May 22nd, 2008 10:39 AM
Non scrolling area in a table sbkumar HTML Code Clinic 0 April 11th, 2008 10:00 AM
Scrolling table with CSS: Almost there! asearle XSLT 1 November 24th, 2007 10:13 AM
scrolling carro123 Javascript How-To 0 June 6th, 2005 12:29 PM
Scrolling smn2 Classic ASP Basics 0 August 28th, 2003 05:00 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.