Hiding Table Rows

[shankwheat]

I'm getting an error in displayDirectors() on the line shown. What I
want to do is hide the rows in the table where rs_Board("DirStatus") =
"Retired" with hideDirectors() and show all records with
showDirectors(). What I did was create a column with a checkbox which
is not visible to the user and check this box when
rs_Board("DirStatus") = "Retired" and leave it unchecked when it
doesn't. There's probably a better way of doing this. I also want the
text in <span id="DirectorsCaption"> to change with each function but
I'm pretty sure this will work when the other error is debugged.
Thanks.

<table width="750">
<tbody id="DirectorsBody" class="smalltext">

<tr>
<td align="center" valign="top" colspan="12"><span
id="DirectorsCaption">ALL CURRENT AND RETIRED DIRECTORS</span></td>
</tr>

<tr>
<td align="center" width="1"></td>
</tr>

<!-- Begin Looping through the records in the rs_Board recordset -->

<tr>
<% Do While Not rs_Board.EOF %>
<td align="center" width="0">
<%
'Make the retired rows a shade of grey except for the IsCEO and
IsChairman columns
If rs_Board("DirStatus") = "Retired" Then
strBgColor="#DBDBDB"
Response.Write "<input type=""checkbox""
style=""display:none"" checked />"
Else
strBgColor="#FFFFFF"
Response.Write "<input type=""checkbox""
style=""display:none"" />"
End If
%>
</td>
<%
rs_Board.MoveNext
Loop
%>

<tr>
<td><input type="button" value="Current directors only"
onclick="hideDirectors();" />
<input type="button" value="All current and retired directors"
onclick="showDirectors();" /></td>
</tr>

function displayDirectors(show) {
var elem = document.getElementById("DirectorsBody");
for (var i = elem.rows.length-1; i >= 0 ; i--) {
if (elem.rows.cells[0].firstChild.checked) { <----Error
here
elem.rows.style.display = show ? "inline" : "none";
}
}
}

function hideDirectors( ) {
displayDirectors(false);
document.getElementById("DirectorsCaption").innerHTML = "CURRENT
DIRECTORS";
}

function showDirectors( ) {
displayDirectors(true);
document.getElementById("DirectorsCaption").innerHTML = "ALL CURRENT
AND RETIRED DIRECTORS";
DIRECTORS";
}

 

[TheBagbournes]

I'm getting an error in displayDirectors() on the line shown. What I
want to do is hide the rows in the table where rs_Board("DirStatus") =
"Retired" with hideDirectors() and show all records with
showDirectors(). What I did was create a column with a checkbox which
is not visible to the user and check this box when
rs_Board("DirStatus") = "Retired" and leave it unchecked when it
doesn't. There's probably a better way of doing this. I also want the
text in <span id="DirectorsCaption"> to change with each function but
I'm pretty sure this will work when the other error is debugged.
Thanks.

<table width="750">
<tbody id="DirectorsBody" class="smalltext">

<tr>
<td align="center" valign="top" colspan="12"><span
id="DirectorsCaption">ALL CURRENT AND RETIRED DIRECTORS</span></td>
</tr>

<tr>
<td align="center" width="1"></td>
</tr>

<!-- Begin Looping through the records in the rs_Board recordset -->

<tr>
<% Do While Not rs_Board.EOF %>
<td align="center" width="0">
<%
'Make the retired rows a shade of grey except for the IsCEO and
IsChairman columns
If rs_Board("DirStatus") = "Retired" Then
strBgColor="#DBDBDB"
Response.Write "<input type=""checkbox""
style=""display:none"" checked />"
Else
strBgColor="#FFFFFF"
Response.Write "<input type=""checkbox""
style=""display:none"" />"
End If
%>
</td>
<%
rs_Board.MoveNext
Loop
%>

<tr>
<td><input type="button" value="Current directors only"
onclick="hideDirectors();" />
<input type="button" value="All current and retired directors"
onclick="showDirectors();" /></td>
</tr>

function displayDirectors(show) {
var elem = document.getElementById("DirectorsBody");
for (var i = elem.rows.length-1; i >= 0 ; i--) {
if (elem.rows.cells[0].firstChild.checked) { <----Error

Well the checkbox is not the firstChild is it? There's a textNode as the
first child - you have whitespace after the <td>.

You need a getFirstElement() function which looks at firstChild, and
goes through nextSibling until the nodeType == 1 (1 being an element node)

Or you could use elem.rows.cells[0].getElementsByTagName("input")[0]

This seems all a bit heavy handed though. I'd experiment with using
styles. Have a "director" class in your stylesheet, and then modify it
in your hide/display function so that you could affect all rows with
that class in one hit instead of looping through them all.