Best way to hide table rows?

[John Dalberg]

What's the best way to hide a bunch of rows in sequence of a table that
works properly across different browsers?

John Dalberg

 

[brucie]

In alt.html John Dalberg said:

What's the best way to hide a bunch of rows in sequence of a table that
works properly across different browsers?

don't put them in the table until needed using a server side process or
as second best tr{display:none;} but browser support varies.

 

[rf]

John Dalberg

What's the best way to hide a bunch of rows in sequence of a [table that
works properly across different browsers]?

Most tables already work proberly across different browsers.

<td style="display: none;">...
<td style="display: none;">...

 

[John Dalberg]

John Dalberg

What's the best way to hide a bunch of rows in sequence of a [table that
works properly across different browsers]?

Most tables already work proberly across different browsers.

<td style="display: none;">...
<td style="display: none;">...

I need to hide a set of of rows in one Javascript statementdepending on a
criteria being selected in a form.

Something like below doesn't work. Changing the display style for MyRows to
none has no effect.


.....
<div id="MyRows">
<tr>... </tr>
<tr>....</tr>
<tr>....</tr>
</div>

John Dalberg

 

[John Dalberg]

In alt.html John Dalberg said:


don't put them in the table until needed using a server side process or
as second best tr{display:none;} but browser support varies.

The rows are part of a form and I want to hide/unhide a section using
client side script depending on criteria selected.

John Dalberg

 

[Mark Parnell]

I need to hide a set of of rows in one Javascript statementdepending on a
criteria being selected in a form.

Well if you *need* it, then Javascript isn't the answer. Client side
script cannot be relied on.

Plus you should have mentioned this in your OP, so the answers might
have been a bit more relevant.

Something like below doesn't work.

Of course not. You can't put <tr>s in a <div>. Didn't the validator tell
you that?

You would have to assign each <tr> an id, and apply the style to each.
But as brucie said, browser support will vary - probably even more so
when attempting to do it dynamically. Even if the browser does allow it
the whole page is going to jump around.

You would be better off describing the actual problem, rather than the
perceived solution. Then maybe we can suggest a better way to achieve
what it is you are trying to do.

 

[rf]

John Dalberg

What's the best way to hide a bunch of rows in sequence of a [table that
works properly across different browsers]?

Most tables already work proberly across different browsers.

<td style="display: none;">...
<td style="display: none;">...

I need to hide a set of of rows in one Javascript statementdepending on a
criteria being selected in a form.

You didn't say that.

Something like below doesn't work. Changing the display style for MyRows to
none has no effect.

....
<div id="MyRows">
<tr>... </tr>
<tr>....</tr>
<tr>....</tr>
</div>

Of course this won't work. It's invalid HTML. The only thing that can be
inside a <table> is <thead>,<tbody>,<tr>. Most certainly not a div. The
browser is probably error correcting it away.

<tbody id="myrows">
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>

Don't mix case, one day it *will* bite you.

 

[John Dalberg]

Well if you *need* it, then Javascript isn't the answer. Client side
script cannot be relied on.

Plus you should have mentioned this in your OP, so the answers might
have been a bit more relevant.


Of course not. You can't put <tr>s in a <div>. Didn't the validator tell
you that?

You would have to assign each <tr> an id, and apply the style to each.
But as brucie said, browser support will vary - probably even more so
when attempting to do it dynamically. Even if the browser does allow it
the whole page is going to jump around.

You would be better off describing the actual problem, rather than the
perceived solution. Then maybe we can suggest a better way to achieve
what it is you are trying to do.

I did some more research and found one method if anyone is interested.

<body>
<style type="text/css">
/*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>
<script type="text/javascript">
function toggleTbody(id) {
if (document.getElementById) {
var tbod = document.getElementById(id);
if (tbod && typeof tbod.className == 'string') {
if (tbod.className == 'off') {
tbod.className = 'on';
} else { tbod.className = 'off';
}
}
} return false;
}
</script>
<a href="#" onclick="return toggleTbody('two');">Toggle tbody two</a>
<table>
<tbody id="one">
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
</tbody>
<tbody id="two">
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
</tbody>
<tbody id="three">
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
</tbody>
</table>

 

[Michael Winter]

[snip]

<style type="text/css">
/*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
tbody.on { display:table-row-group; }

Yes, because user agents must ignore declarations that contain values it
doesn't understand. Earlier IE versions would treat that as:

tbody.on { }

As the rule below wouldn't apply when the TBODY's class is "on", the
display property will return to its default.

tbody.off { display:none; }
[snip]

function toggleTbody(id) {
if (document.getElementById) {
var tbod = document.getElementById(id);
if (tbod && typeof tbod.className == 'string') {
if (tbod.className == 'off') {
tbod.className = 'on';
} else { tbod.className = 'off';
}
}
} return false;
}

An alternative is:

/* One-time code that makes a call to document.getElementById
* always sensible.
*
* This is very basic; an more involved version allows the use of
* the document.all collection to obtain element references, but
* as hiding TBODY elements wasn't allowed until IE 5, when
* document.getElementById was also introduced, the extra code is
* of no use in this case.
*/
if('function' != typeof document.getElementById) {
document.getElementById = function() {return null;};
}

function toggleTbody(id) {
var tbod = document.getElementById(id);
if(tbod) {
(tbod = (tbod.style || tbod)).display
= (tbod.display == 'none') ? '' : 'none';
}
return false;
}

This renders the styles from the original unnecessary. It also enforces an
important issue: the relevant TBODY elements *must* be visible by default.

You can hide them when the document is loaded, but it should be done by
the script, and *not* by CSS. The reason is that if the script can hide
the element, it can show it again. The only way this can be guaranteed
with CSS is if the user can disable CSS page-wide, and the user probably
won't know either how to do that, or even that it's necessary.

[snip]

Mike

 

[Adrienne]

The rows are part of a form and I want to hide/unhide a section using
client side script depending on criteria selected.

John Dalberg

The best way to do what you want is server side, not client side. Have the
form submit to itself, and depending on criteria, then show the elements,
for example (ASP):

<label for="choice">Choice:</label>
<select name="choice" id="choice">
<option value="1" <%if request.form("choice") = "1" then%>selected<%end
if%>>One</option>
<option value="2" <%if request.form("choice") = "2" then%>selected<%end
if%>>Two</option>
</select>
<p><input type="submit" value="Submit" name="submit"></p>
<% if request.form("choice") = "1" then%>
<label for="something">Something: </label>
<input type="text" name="something" id="something">
<% elseif request.form("choice") = "2" then%>
<label for="else">Else: </label>
<textarea id="else" name="else" rows="5" cols="20">
</textarea>
<% end if%>