asked on

Multiple rows and heights.

This works for a single row, can it be set for an unkown number of them?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Tables</title>

<script type="text/javascript">

function sizeRows() {
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1').offsetHeight);
document.getElementById('row2').style.height = H+'px';
document.getElementById('row1').style.height = H+'px';
}

</script>
</head>
<body onload="sizeRows();">

<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr>
<td id="row1">
Data in Table One <---There could be lots of these...
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr>
<td id="row2"> <---There could be lots of these...
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
</td>
</tr>
</table></td>
</tr>
</table>
</body>

Michel Plungjan

You mean

function sizeRows() {
tb = document.getElementById('table1');
allCells = new Array()
for (r=0;r<tb.rows.length;r++) {
for (c=0;c<tb.rows[r].cells.length;c++) allCells[allCells.length]=tb.rows[r].cells[c].offsetHeight
}
H = Math.max(allCells.toString());
for (r=0;r<tb.rows.length;r++) {
for (c=0;c<tb.rows[r].cells.length;c++) =tb.rows[r].cells[c].style.height = H+'px';
}
}

Michel Plungjan

oops

function sizeRows() {
tb = document.getElementById('table1');
allCells = new Array()
for (r=0;r<tb.rows.length;r++) {
for (c=0;c<tb.rows[r].cells.length;c++) allCells[allCells.length]=tb.rows[r].cells[c].offsetHeight
}
H = Math.max(allCells.toString());
for (r=0;r<tb.rows.length;r++) tb.rows[r].style.height = H+'px';

}

Michel Plungjan

or something... You named the cell row1 and 2

seanpowell

ASKER

Something's wrong....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Tables</title>

<style type="text/css">

table { border: 6px solid blue; }
table td table { border: 3px solid gray; }
table td table td { border: 3px solid black; }

</style>

<script type="text/javascript">

function sizeRows() {
tb = document.getElementById('table1');
allCells = new Array()
for (r=0;r<tb.rows.length;r++) {
for (c=0;c<tb.rows[r].cells.length;c++) allCells[allCells.length]=tb.rows[r].cells[c].offsetHeight
}
H = Math.max(allCells.toString());
for (r=0;r<tb.rows.length;r++) tb.rows[r].style.height = H+'px';

}

</script>
</head>
<body onload="sizeRows();">

<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr>
<td id="row1a">
Data in Table One Row One
</td>
</tr>
<tr>
<td id="row1b">
Data in Table One Row Two
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr>
<td id="row2a">
Data in Table Two Row One<br />
Data in Table Two Row One<br />
Data in Table Two Row One<br />
Data in Table Two Row One<br />
</td>
</tr>
<tr>
<td id="row2b">
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

We need to reference the other table somwehere, don't we?

Michel Plungjan

tb = document.getElementById('table1');
references ONE table. I did not see you wanted more than one table

Michel

COBOLdinosaur

How about:

AllCells = document.getElementsByTagName("td").offsetHeight;
H=Math.max(AllCells.toSting());
for (i=0;i<AllCells.length;i++)
{
allCells.style.height=H+'px';
}

Does that work?

Cd&

Michel Plungjan

Michel Plungjan

even better, cobol ;)

seanpowell

ASKER

Hmmm - not yet - AllCells is null or not an object...

brgivens

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Tables</title>

<style type="text/css">

table { border: 6px solid blue; }
table td table { border: 3px solid gray; }
table td table td { border: 3px solid black; }

</style>

<script type="text/javascript">

function sizeRows() {
var tb = document.getElementById('table2'), H=0;
for (r=0;r<tb.rows.length;r++) for (c=0;c<tb.rows[r].cells.length;c++) H = Math.max(H,tb.rows[r].cells[c].offsetHeight);
tb = document.getElementById('table1')
for (r=0;r<tb.rows.length;r++) for (c=0;c<tb.rows[r].cells.length;c++) tb.rows[r].cells[c].style.height = H+'px';

}

</script>
</head>
<body onload="sizeRows();">

<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr>
<td id="row1a">
Data in Table One Row One
</td>
</tr>
<tr>
<td id="row1b">
Data in Table One Row Two
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr>
<td id="row2a">
Data in Table Two Row One<br />
Data in Table Two Row One<br />
Data in Table Two Row One<br />
Data in Table Two Row One<br />
</td>
</tr>
<tr>
<td id="row2b">
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
Data in Table Two Row Two<br />
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Michel Plungjan

allCells = document.getElementsByTagName("td")
allHeights = new Array()
for (i=0;i<allCells.length;i++)
{
allHeights[i] = allCells[i].style.offsetHeight
}
H=Math.max(allHeights.toSting());
for (i=0;i<allCells.length;i++)
{
allCells[i].style.height=H+'px';
}

BOO cobol

COBOLdinosaur

Sure you missed the typo:

allCells.style.height=H+'px';

Should be AllCells.

You didn't think would go without a typo just becaue it's Easter.

Cd&

Michel Plungjan

toSting()
should be
toString()
sorry

seanpowell

ASKER

Didn't miss it - didn't work :-)

Still no joy guys...

COBOLdinosaur

Oh that too....

allHeights[i] = allCells[i].style.offsetHeight
?
I think:
allHeights[i] = allCells[i].offsetHeight

offsetHeight is not part of the style object

Cd&

seanpowell

ASKER

Invalid argument Michel...

So far I have this:

<script type="text/javascript">

function sizeRows() {
allCells = document.getElementsByTagName("td")
allHeights = new Array()
for (i=0;i<allCells.length;i++)
{
allHeights[i] = allCells[i].style.offsetHeight
}
H=Math.max(allHeights.toString());
for (i=0;i<allCells.length;i++)
{
allCells[i].style.height=H+'px';
}

}

</script>

seanpowell

ASKER

And now this, still invalid argument:

<script type="text/javascript">

function sizeRows() {
allCells = document.getElementsByTagName("td")
allHeights = new Array()
for (i=0;i<allCells.length;i++)
{
allHeights[i] = allCells[i].offsetHeight
}
H=Math.max(allHeights.toString());
for (i=0;i<allCells.length;i++)
{
allCells[i].style.height=H+'px';
}

}

</script>

brgivens

sean,

I tested mine & it does work... the cells in the first table are a bit higher than the second because of the borders... offsetHeight includes the borders wheras style.height does not. If you don't plan on having a border, the code I posted will work. If you do, let me know & I'll adjust the code to account for the border.

seanpowell

ASKER

I think brgivens is pretty close, except it appears to make the 1 and 3 the same, as opposed to 1 and 2:

Table cells:

1 2
3 4

1 should be the same height as 2, and 3 should be the same height as 4...

seanpowell

ASKER

>>I tested mine & it does work

Noy yet...
http://www.pdgmedia.com/ee/1c.html

seanpowell

ASKER

Other version is here:
http://www.pdgmedia.com/ee/1d.html

brgivens

This?

function sizeRows() {
var tb = document.getElementById('table2'), H=0;
for (r=0;r<tb.rows.length;r++) for (c=0;c<tb.rows[r].cells.length;c++) document.getElementById('table1').rows[r].cells[c].style.height = tb.rows[r].cells[c].offsetHeight + "px";
}

seanpowell

ASKER

That seems to do the trick, uless there's any padding in the cells:
http://www.pdgmedia.com/ee/1e.html

So we just need to add the padding to the statement, whatever it's set at. Correct?

seanpowell

ASKER

As in:
http://www.pdgmedia.com/ee/1e-1.html

seanpowell

ASKER

Interesting - Moz has no problem calculating the padding - just IE...

ASKER CERTIFIED SOLUTION

brgivens

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

seanpowell

ASKER

That seems to have nailed it:-)

Thanks all, and have a Happy Egg!

brgivens

I should've simplified that:

function sizeRows() {
var c, tb1 = document.getElementById('table1'), tb2 = document.getElementById('table2'), o, p, r;
for (r=0;r<tb2.rows.length;r++) for (c=0;c<tb2.rows[r].cells.length;c++) {(o=tb1.rows[r].cells[c]).style.height = (p=tb2.rows[r].cells[c]).offsetHeight + "px"; o.style.height = (2 * p.offsetHeight - o.offsetHeight) + "px";}
}

brgivens

Glad I could help :)

Happy "Egg" 2 all 2!