getting the row height of a HTML Table dynamically! 1

fixthebug2003 · Jul 30, 2004

Hi,
I have a simple HTML table,like this

<table id="itab" width="100%" >
<tr>
<td> EMP NO</td>
<td> EMP NAME </td>
<td> SALARY </td>
<td> NOTES </td>
</tr>
</table>

Now, if the notes becomes long enough, the text wraps, which is fine, and the row height changes, which is also fine for me. The only thing I want is to get the row height using javascript.
something like:
document.all.itab.rows(1).height

if you don't have a height attribute for a row, I get the valus as undefined. If you define a height attribute for the row, it gets only what you have set it to, not the one it got changed to dynamically when the notes wraps up!

fithebug2003

BillyRayPreachersSon · Jul 30, 2004

This works for me in IE6 and FireFox 0.8:

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		function findHeights() {
			var tbl = document.getElementById('wibble').rows;
			alert(tbl[0].offsetHeight);
			alert(tbl[1].offsetHeight);
		}
	//-->
	</script>
</head>
<body>
	<input type="button" onclick="findHeights();" value="Find Heights">
	<table id="wibble" border="1">
		<tr><td>abc</td></tr>
		<tr><td>def<br />ghi</td></tr>
	</table>
</body>
</html>

Hope this helps,
Dan

fixthebug2003 · Jul 30, 2004

Thanks a lot BillyRayPreachersSon! That's exactly what I was looking for !

kaht · Jul 30, 2004

fixthebug2003 said:
Thanks a lot BillyRayPreachersSon! That's exactly what I was looking for !

Perhaps you should award Dan a star for his helpful post. Your profile shows 170 posts without ever awarding a star to anyone that has helped you. Surely after that many posts you MUST have had at least one answer worthy of a star. Otherwise..... why would you keep coming back?

-kaht

fixthebug2003 · Jul 30, 2004

kaht,
Is this web-site run by voluntary members...? How does this web-site get funded? I definitely like this web-site and I would like to contribute whatever I can !!

Fixthebug2003

kaht · Jul 30, 2004

You can definitely contribute to the site. If you look to the left side of your screen directly above your threadminder, you'll see a blue and yellow box that is labeled "support tek-tips!". Follow that link and it should show you everything you need.

-kaht

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

getting the row height of a HTML Table dynamically! 1

fixthebug2003

Programmer

BillyRayPreachersSon

Programmer

fixthebug2003

Programmer

kaht

Programmer

fixthebug2003

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor