Dynamically setting the height of a table cell

hi,

I'm pulling data from a database and want to alter the height of the td class "space", depending on the amount of rows.

here's what i've got so far:

<?php
$connection = mysql_connect("db12345.db.1and1.com","dbo12345","12345");
mysql_select_db("db12345");
if (!$connection) {
die("Error: " . mysql_error());
} else {
}
echo "<table id=\"mytable\">";

$myresult = mysql_query("SELECT * FROM thetable");
while($row = mysql_fetch_object($myresult))
{
echo "<tr>
<td><p class=\"i\">".nl2br($row->field1)."</p></td>
<td><p class=\"i\">".nl2br($row->field2)."</p></td>
<td><p class=\"i\">".nl2br($row->field3)."</p></td>
<td class=\"space\">This cell should have variable height depending on overall height of table</td></tr></table>";
}
mysql_close("db12345","dbo12345","12345");
?>


<button name="set_height" id="set_height">Set height</button>


<script type="text/javascript">
$('#set_height').click(function() {
var theheight = $("#mytable").height();
alert(theheight);
if (theheight < 1000) {
document.getElementsByClassName("space").style.height = 100 + 'px';
}
});
</script>

Everything works fine, but the cells don't resize. There's some reaction when i assign an id to the td and use document.getElementById("space"), meaning that the first row resizes - at least something.

It's probably necessary to loop through the rows, so I tried


var thelist = document.getElementsByClassName("space");
for (var i = 0; i < thelist.length; i++) {
var elements = thelist[i];
elements.height = 100 + 'px';
}


but that doesn't work.

Can anyone spot a simple syntax mistake, or - being a complete js newb - have i approached things 100% wrong?

Thanks for any hints...

Not to ask a silly question, but...

Have you considered simply using CSS an *percentages* to set your heights?


<style type="text/css">
#mytable { height: 90%; }
#mytable .space { height: 27%; }
</style>

Or whatever percentages make sense?

Thanks for replying. Normally this straightforward solution would work perfectly. However I should have explained more in detail what I'm trying to do:

Certain people can enter data in a list, which should eventually be printed out on paper. What I'm after is some sort of auto-layout function. If there are only a few rows, data will fit on one page with fairly big spaces between the rows. The cell height will decrease with an increasing number of rows. Your suggested solution would work until here.

But: if a defined table height is exceeded and things get too crowded, the data should spread out on 2 pages from top to bottom etc.

The calculation isn't a problem, it's just that I can't get the "space" class / (id ?) to resize.

Thanks for further ideas...

Without height the cells will take the required place in the table...
You have also the option to change the cells padding and the font line-heigth and to play with a media="print" style.

Yes I know about @media print etc., still this won't solve this problem:


if a defined table height is exceeded and things get too crowded, the data should spread out on 2 pages from top to bottom etc.

Yes, you will need to loop through the elements as getElementsByClassName returns a collection.

getElementsByClassName works in modern browsers - are you using an older browser..

You are using jQuery (or other framework) as I recognise from

$('#set_height').click(function() {
Have you attached this library as a script?

If you are using jQuery then it makes sense to use it to set the height, and to refer to the elements by their classname.

thanks...

Have you attached this library as a script?

well, at least i think i have. i've added

<script type="text/javascript" src="jquery.js"></script>

before the rest of the scripts, jquery.js sitting in the same folder.

If you are using jQuery then it makes sense to use it to set the height, and to refer to the elements by their classname.

Back to the drawing board. This shows me that I have no clue about javascripting at all - I just grabbed some snippets from various forum posts and threw them together without actually really knowing what I'm doing. :-)