It is currently Tue Sep 07, 2010 6:44 am


Codemiles.com » Web Development Forums » Scripting Language

All times are UTC [ DST ]

Ask on Codemiles community and get answers Free and Fast :

HTML,DHTML,Javascript,XML,CSS

Our guest share with us your code snippets , your programming problems , your open source projects ,read articles and post yours .







Post new topic Reply to topic  Page 1 of 1
  [ 6 posts ] 
  Print view Previous topic | Next topic 
Author Message
mileloader
 Post subject: HTML Scrollable table
PostPosted: Sun Nov 30, 2008 11:28 pm 
Offline
Beginner
User avatar

Joined: Sun May 25, 2008 5:34 pm
Posts: 95
Has thanked: 2 time
Have thanks: 0 time

This code allow to make a scrollable HTML table , the basic idea the you determine the width and height of your table and pass them as a parameter ScrollableTable Javascript function , when the width and height are less than the required , the scrollable will appear , take in mind that you will send id of your table to the function which here is "myScrollTable" .You can change the rows background colors , by changing the CSS part in the start of the html file ,
Code:
   background: #99FF99;



Here index.html :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Scrollable HTML table</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="myscript.js"></script>

    <style>
        table {
            text-align: left;
            font-size: 12px;
            font-family: verdana;
            background: #c0c0c0;
        }

        table thead  {
            cursor: pointer;
        }

        table thead tr,
        table tfoot tr {
            background: #99FF99;
        }

        table tbody tr {
            background: #00FFFF;
        }

        td, th {
            border: 1px solid white;
        }
    </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
    <thead>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
    </thead>

    <tbody>
        <tr class="r1">
            <td>AAA</th>
            <td>AAA</th>
            <td>AAA</th>
        </tr>
        <tr class="r2">
            <td>BBB</th>
            <td>BBB</th>
            <td>BBB</th>
        </tr>
        <tr class="r1">
            <td>CCC</th>
            <td>CCC</th>
            <td>CCC</th>
        </tr>
        <tr class="r2">
            <td>DDD</th>
            <td>DDD</th>
            <td>DDD</th>
        </tr>
        <tr class="r1">
            <td>EEE</th>
            <td>EEE</th>
            <td>EEE</th>
        </tr>
        <tr class="r2">
            <td>FFF</th>
            <td>FFF</th>
            <td>FFF</th>
        </tr>
        <tr class="r1">
            <td>GGG</th>
            <td>GGG</th>
            <td>GGG</th>
        </tr>
        <tr class="r2">
            <td>III</th>
            <td>III</th>
            <td>III</th>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 150,250);
</script>

</body>
</html>


Here myscript.js file ,

Code:


function ScrollableTable (tableEl, tableHeight, tableWidth) {

   this.initIEengine = function () {

      this.containerEl.style.overflowY = 'auto';
      if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
         this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
      } else {
         this.containerEl.style.overflowY = 'hidden';
         this.tableEl.style.width = this.newWidth +'px';
      }

      if (this.thead) {
         var trs = this.thead.getElementsByTagName('tr');
         for (x=0; x<trs.length; x++) {
            trs[x].style.position ='relative';
            trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
         }
      }

      if (this.tfoot) {
         var trs = this.tfoot.getElementsByTagName('tr');
         for (x=0; x<trs.length; x++) {
            trs[x].style.position ='relative';
            trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
         }
      }

      eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
   };


   this.initFFengine = function () {
      this.containerEl.style.overflow = 'hidden';
      this.tableEl.style.width = this.newWidth + 'px';

      var headHeight = (this.thead) ? this.thead.clientHeight : 0;
      var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
      var bodyHeight = this.tbody.clientHeight;
      var trs = this.tbody.getElementsByTagName('tr');
      if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
         this.tbody.style.overflow = '-moz-scrollbars-vertical';
         for (x=0; x<trs.length; x++) {
            var tds = trs[x].getElementsByTagName('td');
            tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
         }
      } else {
         this.tbody.style.overflow = '-moz-scrollbars-none';
      }

      var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
      this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';

   };

   this.tableEl = tableEl;
   this.scrollWidth = 16;

   this.originalHeight = this.tableEl.clientHeight;
   this.originalWidth = this.tableEl.clientWidth;

   this.newHeight = parseInt(tableHeight);
   this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;

   this.tableEl.style.height = 'auto';
   this.tableEl.removeAttribute('height');

   this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
   this.containerEl.appendChild(this.tableEl);
   this.containerEl.style.height = this.newHeight + 'px';
   this.containerEl.style.width = this.newWidth + 'px';


   var thead = this.tableEl.getElementsByTagName('thead');
   this.thead = (thead[0]) ? thead[0] : null;

   var tfoot = this.tableEl.getElementsByTagName('tfoot');
   this.tfoot = (tfoot[0]) ? tfoot[0] : null;

   var tbody = this.tableEl.getElementsByTagName('tbody');
   this.tbody = (tbody[0]) ? tbody[0] : null;

   if (!this.tbody) return;

   if (document.all && document.getElementById && !window.opera) this.initIEengine();
   if (!document.all && document.getElementById && !window.opera) this.initFFengine();


}



Attachments:
File comment: screen shot of scrollable table in HTML
qa.JPG
qa.JPG [ 12.91 KiB | Viewed 11961 times ]
TOP
 Profile Send private message  
 
| More
robhmac
 Post subject: Re: HTML Scrollable table
PostPosted: Thu Mar 05, 2009 11:44 pm 
Offline
Newbie
User avatar

Joined: Thu Mar 05, 2009 11:38 pm
Posts: 5
Has thanked: 0 time
Have thanks: 0 time

So far, this is the best implementation that I have come across for a scrollable table.

Is there a way to modify this script so that you can also have a locked left column in addition to a locked row at the top?

Thank you.


TOP
 Profile  
 
| More
hearts
 Post subject: Re: HTML Scrollable table
PostPosted: Fri Sep 18, 2009 6:41 am 
Offline
Newbie
User avatar

Joined: Fri Sep 18, 2009 6:30 am
Posts: 1
Has thanked: 0 time
Have thanks: 0 time

How can I use rowspan.


TOP
 Profile Send private message  
 
| More
codemiles
 Post subject: Re: HTML Scrollable table
PostPosted: Sat Sep 19, 2009 3:26 am 
Offline
Site Admin
User avatar

Joined: Mon Mar 26, 2007 4:07 pm
Posts: 24
Location: Earth
Has thanked: 1 time
Have thanks: 0 time

rowspan control the number of span rows in your table . You can have one column that have length of two rows , or three ,
you use it with <Td> tag :
Code:
 
<td ROWSPAN=4></td>
 

_________________
just walk beside me ! and be my friend .
Image

TOP
 Profile Send private message  
 
| More
robhmac
 Post subject: Re: HTML Scrollable table
PostPosted: Sat Sep 19, 2009 5:30 am 
Offline
Newbie
User avatar

Joined: Thu Mar 05, 2009 11:38 pm
Posts: 5
Has thanked: 0 time
Have thanks: 0 time

I have since found another script, by Richard Cornford, that allows for a locked top row, and a locked left column:

http://www.oasections.com/articles/scrollabletable.html

also, rowspan and colspan can be used as normal


TOP
 Profile  
 
| More
howard001
 Post subject: Re: HTML Scrollable table
PostPosted: Sun Sep 20, 2009 11:14 am 
Offline
Newbie
User avatar

Joined: Sun Sep 20, 2009 10:21 am
Posts: 1
Location: US
Has thanked: 0 time
Have thanks: 0 time

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.
Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrollable HTML table</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}

table thead {
cursor: pointer;
}

table thead tr,
table tfoot tr {
background: #c0c0c0;
}

table tbody tr {
background: #f0f0f0;
}

td, th {
border: 1px solid white;
}
</style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
<thead>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</thead>

<tbody>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">30</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">31</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">32</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">33</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">34</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">35</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">36</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">37</th>
</tr>
</tbody>

<tfoot>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
* Scrollable HTML table
* http://www.webtoolkit.info/
*
**/

function ScrollableTable (tableEl, tableHeight, tableWidth) {

this.initIEengine = function () {

this.containerEl.style.overflowY = 'auto';
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
} else {
this.containerEl.style.overflowY = 'hidden';
this.tableEl.style.width = this.newWidth +'px';
}

if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
}
}

if (this.tfoot) {
var trs = this.tfoot.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
}
}

eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};


this.initFFengine = function () {
this.containerEl.style.overflow = 'hidden';
this.tableEl.style.width = this.newWidth + 'px';

var headHeight = (this.thead) ? this.thead.clientHeight : 0;
var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
var bodyHeight = this.tbody.clientHeight;
var trs = this.tbody.getElementsByTagName('tr');
if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
this.tbody.style.overflow = '-moz-scrollbars-vertical';
for (x=0; x<trs.length; x++) {
var tds = trs[x].getElementsByTagName('td');
tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
}
} else {
this.tbody.style.overflow = '-moz-scrollbars-none';
}

var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';

};

this.tableEl = tableEl;
this.scrollWidth = 16;

this.originalHeight = this.tableEl.clientHeight;
this.originalWidth = this.tableEl.clientWidth;

this.newHeight = parseInt(tableHeight);
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;

this.tableEl.style.height = 'auto';
this.tableEl.removeAttribute('height');

this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
this.containerEl.appendChild(this.tableEl);
this.containerEl.style.height = this.newHeight + 'px';
this.containerEl.style.width = this.newWidth + 'px';


var thead = this.tableEl.getElementsByTagName('thead');
this.thead = (thead[0]) ? thead[0] : null;

var tfoot = this.tableEl.getElementsByTagName('tfoot');
this.tfoot = (tfoot[0]) ? tfoot[0] : null;

var tbody = this.tableEl.getElementsByTagName('tbody');
this.tbody = (tbody[0]) ? tbody[0] : null;

if (!this.tbody) return;

if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();


} :sohappy:


TOP
 Profile Send private message  
 
| More
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 6 posts ] 


 Similar topics
 Topic title   Forum   Author   Replies 
 Table Border Colors for PHPBB3  PHP  swerfelmann  3
 Kaazing Founder Jonas Jacobi to speak on HTML 5, Comet, WebS  General Discussion  Shaguf  1
 secondary table per entity  JPA  msi_333  0
 separate table per subclass  JPA  msi_333  0
 single table inheritance  JPA  msi_333  0

Codemiles.com » Web Development Forums » Scripting Language

All times are UTC [ DST ]

Who is online

Users browsing this forum: No registered users and 1 guest

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  




Navigation menu Programming help Web Development SEO Others

Home
General Talks
Finished Projects
Code Library
Games
Tutorials

Java
C/C++
C-sharp
php
Script
JSP/Servlets
Ajax
ASP/ASP.net
Google SEO
Database
Communications
Phpbb3 styles
Photoshop tutorials
Flash tutorials
Find a job





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2009
mileX v1.0 designed by codemiles team