Scrollable table unobtrusive script

Here is nice piece of code that works fair in all browsers: http://www.imaputz.com/cssStuff/bigFourVersion.html

Since there are things that need to be computed for every particular table (extra space for scrollbar, fixed width for every cell), I'd like to create a javascript that modifies the table to make it scrollable.

Such scripts already exist, i.e. http://www.farinspace.com/jquery-scrollable-table-plugin/ but all of them need to specify the height of开发者_JAVA技巧 the table. I'd like to extract the height from CSS to make the script unobtrusive.

If I write the height as inline style, all browsers can read the table.style.height property. But when external style is used

<style>
  .scrollTable { display: block; overflow: hidden; height: 200px; }
</style>

only Firefox can read the offsetHeight/clientHeight property as expected. Other browsers can't change table layout to block, I guess.

The only thing that I figured out is to read external CSS

function getCSS(rule,prop) {
  if(!(document && document.styleSheets)) return;
  var result="", ds = document.styleSheets;
  for(var i=0; i<ds.length; i++) {
    var r = getCSS1(ds[i],rule,prop);
    if(r) result = r;
  }
  return result;
}
function getCSS1(sheet,rule,prop) {
  var rules = sheet.cssRules? sheet.cssRules: sheet.rules;
  var result = "";
  for(var i=0; i<rules.length; i++) {
    var r = rules[i].selectorText.toLowerCase();
    if(r.indexOf(rule)==-1) continue;
    if(r.lastIndexOf(rule)!=r.length-rule.length) continue;
    var p = rules[i].style[prop];
    if(p) result = p;
  }
  return result;
}

var height = getCSS(".scrollTable","height");

But the height might be specified otherwise: by id, another class or inherited, so I am probably in wrong way. Is there any other way how to guess the table height? I am about to give up.

In short

I want this code

<script src="scrollTable.js"></script> // load the script
<style> .scrollTable { height: 200px; } // set the CSS
<table class="scrollTable">...</table> // script should do all the tricks

My script can do all the tricks except for get the table height. How to extract it?

Why not enclose the <table> in a <div>? This way you should be able to the get the <div> height even if it's in an external CSS.

With jQuery you can use .css() function:

table_height = $("table.scrollTable").css("height");

This will return the height of your table including px. So you can extract only the number with some other javascript function.

Assuming you are using jQuery (you did mention a jQuery plugin), you can calculate the height of an element using $('table.selector').height().

Is getComputedStyle the answer ? See here : http://blog.stchur.com/2006/06/21/css-computed-style/

You could use

document.getElementById("ID").clientHeight

It worked for me in IE8 and Chrome when I tested height set via

• html
• inline style
• style sheet

Here's what I did:

<table height="350" id="one">
<table> 

<table style="height:400px;" id="two">
<table> 

<table class="height" id="three">
<table> 

and

alert(document.getElementById("one").clientHeight);

alert(document.getElementById("two").clientHeight);

alert(document.getElementById("three").clientHeight);

Working example: http://jsfiddle.net/jasongennaro/h9B2j/

EDIT

Something else must be interfering with the code, I think, as

document.getElementById("").clientHeight;

works for me even without the height being set.

See another example here: http://jsfiddle.net/jasongennaro/h9B2j/2/