Hiding Table Rows

[shankwheat]

I'm getting an error in displayDirector s() on the line shown. What I
want to do is hide the rows in the table where rs_Board("DirSt atus") =
"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("DirSt atus") = "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="DirectorsCa ption"> 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="DirectorsBo dy" class="smalltex t">

<tr>
<td align="center" valign="top" colspan="12"><s pan
id="DirectorsCa ption">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("DirSt atus") = "Retired" Then
strBgColor="#DB DBDB"
Response.Write "<input type=""checkbox ""
style=""display :none"" checked />"
Else
strBgColor="#FF FFFF"
Response.Write "<input type=""checkbox ""
style=""display :none"" />"
End If
%>
</td>
<%
rs_Board.MoveNe xt
Loop
%>

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

function displayDirector s(show) {
var elem = document.getEle mentById("Direc torsBody");
for (var i = elem.rows.lengt h-1; i >= 0 ; i--) {
if (elem.rows[i].cells[0].firstChild.che cked) { <----Error
here
elem.rows[i].style.display = show ? "inline" : "none";
}
}
}

function hideDirectors( ) {
displayDirector s(false);
document.getEle mentById("Direc torsCaption").i nnerHTML = "CURRENT
DIRECTORS";
}

function showDirectors( ) {
displayDirector s(true);
document.getEle mentById("Direc torsCaption").i nnerHTML = "ALL CURRENT
AND RETIRED DIRECTORS";
DIRECTORS";
}

[TheBagbournes]

shankwheat wrote:

I'm getting an error in displayDirector s() on the line shown. What I
want to do is hide the rows in the table where rs_Board("DirSt atus") =
"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("DirSt atus") = "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="DirectorsCa ption"> 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="DirectorsBo dy" class="smalltex t">

<tr>
<td align="center" valign="top" colspan="12"><s pan
id="DirectorsCa ption">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("DirSt atus") = "Retired" Then
strBgColor="#DB DBDB"
Response.Write "<input type=""checkbox ""
style=""display :none"" checked />"
Else
strBgColor="#FF FFFF"
Response.Write "<input type=""checkbox ""
style=""display :none"" />"
End If
%>
</td>
<%
rs_Board.MoveNe xt
Loop
%>

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

function displayDirector s(show) {
var elem = document.getEle mentById("Direc torsBody");
for (var i = elem.rows.lengt h-1; i >= 0 ; i--) {
if (elem.rows[i].cells[0].firstChild.che cked) { <----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[i].cells[0].getElementsByT agName("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.