How to hide table rows with the help of getElementsByName()?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

AR - 30 Jun 2005 17:24 GMT

Hi,
How can I hide table rows? ... tried with the following example:
FireFox works... How to do the simillar in IE6?

<html>
<head>
<script language="javascript">
function hide_row() {
var v = document.getElementsByName("trBook");
    v[0].style.display = 'none';
    v[1].style.display = 'none';
    v[2].style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr name="trBook"><td>line1</td></tr>
<tr name="trBook"><td>line2</td></tr>
<tr name="trBook"><td>line3</td></tr>
</table>
<input type=button name="v" value="Hide" onclick="hide_row()">
</body>
</html>

Thanks in advance

AR

Reply to this Message

Danny - 28 Jun 2005 23:06 GMT

Yes, as Martin said, use the rows[] collection for the table element:

document.getElementById('YOURTABLEIDHERE').rows[3].style.display='none';
//sets the
style.display for it to 'none';

Another way will be using associative IDs for the relevant elements and
iterate
through them.

Danny

--Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

Reply to this Message

Martin Honnen - 30 Jun 2005 17:42 GMT

> var v = document.getElementsByName("trBook");

> <tr name="trBook"><td>line1</td></tr>
> <tr name="trBook"><td>line2</td></tr>
> <tr name="trBook"><td>line3</td></tr>

The name attribute is not defined for <tr> elements so you are relying
on browser quirks to give you a result with getElementsByName. Consider
accessing the table and then its rows collection if you want to script
the <tr> elements in that table.

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

RobB - 30 Jun 2005 17:46 GMT

> Hi,
> How can I hide table rows? ... tried with the following example:
[quoted text clipped - 24 lines]
>
> AR

document.getElementsByName() is only implemented for input and img
elements in iewin/Opera. Use a TBODY with an id:

function hide_row()
{
var el;
if (document.getElementById
&& (el = document.getElementById('trBook')))
{
el.style.display = 'none';
}
}
.........
<table>
<tbody id="trBook">
<tr><td>line1</td></tr>
<tr><td>line2</td></tr>
<tr><td>line3</td></tr>
</tbody>
</table>

If you need to do this with individual rows, you can use a naming
convention of some sort, or selectively apply the
.getElementsByTagName() method.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / June 2005

How to hide table rows with the help of getElementsByName()?