Show hide row in netscape using javascript

T

Thomas Abraham

Hi,

The following code to show and hide a row works fine in netscape 7 and
IE 6. But everytime the cell is hidden and displayed in netscape, it
adds a new line inside the cell. Please advise.
----snip----
<html>
<head>
<title>Table hide</title>
<script language="javascript">
function flipCell(count){
f=document.getElementById("mcell");
f.style.display=(f.style.display=="block")?"none":"block";
}
</script>
</head>
<body>
<a href="javascript:flipCell(0)">here</a>

<table cellpadding="0" cellspacing="0" border="1" width="95%">
<tr>
<td>Column 1</td>
</tr>
<tr id="mcell" style="display: block;">
<td>Column 2</td>
</tr>
</table>
John Doe
</body>
</html>
---snip---


Thanks in advance,

-Tom
 
N

Nigel White

Bagbourne said:
Is it essential that you use a table? Could you use a series of DIVs?

This seems to work (tested on Opera, IE5, NS 6.2):

<html>
<head>
<title>Table hide</title>
<script language="javascript">
showRow = (navigator.appName.indexOf("Internet Explorer") != -1) ? "block" :
"table-row";
function flipCell(count)
{
f = document.getElementById("mcell");
f.style.display = (f.style.display == "none") ? showRow : "none";
}
</script>
</head>
<body>
<a href="javascript:flipCell(0)">here</a>

<table cellpadding="0" cellspacing="0" border="1" width="95%">
<tr>
<td>Column 1</td>
</tr>
<tr id="mcell">
<td>Column 2</td>
</tr>
</table>
John Doe
</body>
</html>

Nige
 
R

Richard Cornford

This seems to work (tested on Opera, IE5, NS 6.2):

<html>
<head>
<title>Table hide</title>
<script language="javascript">
showRow = (navigator.appName.indexOf("Internet Explorer") != -1) ?
"block" : "table-row";

The problem with this is that there is no relationship between the
navigator.appName property and the default CSS display property for a
table row. Opera might take either option in this test based on user
settings and other browsers that habitually spoof IE may have
implemented the "table-row" CSS property.

Fortunately the decision does not have to be made as it appears to be
the case that browsers will take the setting of the display property to
an empty string as equivalent to setting the property to the default
value for that element, whatever that default value is.
function flipCell(count)
{
f = document.getElementById("mcell");
f.style.display = (f.style.display == "none") ? showRow : "none";

So:-

f.style.display = (f.style.display == "none") ? "" : "none";
}
</script>
</head>
<body>
<a href="javascript:flipCell(0)">here</a>
<snip>

The use of the javascript pseudo-protocol is ill advised as its use
causes numerous unexpected and undesirable effects, some of which are
browser, browser version and/or operating system dependent and thus
difficult to identify:-

<URL: http://jibbering.com/faq/#FAQ4_24 >

Richard.
 
T

Thomas Abraham

Works perfectly! Thanks.


Nigel White said:
This seems to work (tested on Opera, IE5, NS 6.2):

<html>
<head>
<title>Table hide</title>
<script language="javascript">
showRow = (navigator.appName.indexOf("Internet Explorer") != -1) ? "block" :
"table-row";
function flipCell(count)
{
f = document.getElementById("mcell");
f.style.display = (f.style.display == "none") ? showRow : "none";
}
</script>
</head>
<body>
<a href="javascript:flipCell(0)">here</a>

<table cellpadding="0" cellspacing="0" border="1" width="95%">
<tr>
<td>Column 1</td>
</tr>
<tr id="mcell">
<td>Column 2</td>
</tr>
</table>
John Doe
</body>
</html>

Nige
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top