By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

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

P: n/a
AR
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

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


AR wrote:

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.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
AR wrote:
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


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.

Jul 23 '05 #3

P: n/a
On Thu, 30 Jun 2005 09:24:22 -0700, AR <ar********@yahoo.com> wrote:
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/
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.