collapse and uncollapse tables

[Samir]

<table width="225" border="0">
<tr>
<td width="10" id="MyCell1"
onclick="ShowHide('MyRow1','MyCell1')"><img
src="images/plus3.gif"></td>
<td width="205">blahasdfadfadfasd</strong></a></div></td>
</tr>
<tr id="MyRow1">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</a></td>
</tr>
</table>
</td></tr>
<tr>
<td width="10" id="MyCell2"
onclick="ShowHide('MyRow2','MyCell2')"><img
src="images/plus3.gif"></td>
<td width="205">blahasdfadfadfasd</strong></a></div></td>
</tr>
<tr id="MyRow2">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</a></td>
</tr>
</table>
</td></tr>
<tr>
<td width="10" id="MyCell3"
onclick="ShowHide('MyRow3','MyCell3')"><img
src="images/plus3.gif"></td>
<td width="205">blahasdfadfadfasd</strong></a></div></td>
</tr>
<tr id="MyRow3">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</a></td>
</tr>
</table>
</td></tr>
</table>
<script type="text/javascript">
var m_intShow = 0;
function ShowHide(strRowID,strCellID)
{
var objRow = document.getElementById(strRowID);

if (m_intShow == 0)
{
objRow.style.display = "block";
var objCell = document.getElementById(strCellID);
objCell.innerHTML = "<img src=images/minus2.gif>";
m_intShow = 1;
}
else
{
objRow.style.display = "none";
var objCell = document.getElementById(strCellID);
objCell.innerHTML = "<img src=images/plus3.gif>";
m_intShow = 0;
};
}

function runhide(){
var objs = new Array();
rowCount = this.asdfform.txtAID.value;
for(var i=1;i<=rowCount;i++){
(objs[i] = document.getElementById("MyRow"+i)).style.display =
"none";
}
}

runhide()
</script>

So everything works really good on load up, it loads the rows in the
tables. When the table is done, the javascript loads runhide() which
collapses all of the rows.

The javascript works fine when they click on the plus and it shows the
row, and when I click on the same plus it collapses. The problem
is...when I click the first cell, it shows the row, then If I want to
expand cell 2, I have to click it twice to get it to expand. Then when
I go to cell 1, I have to click twice to collapse it.

If anyone can correct my coding it would be appreciated, thanks.

[web.dev]

Samir wrote:
[snip]

<script type="text/javascript">
var m_intShow = 0;
function ShowHide(strRowID,strCellID)
{
var objRow = document.getElementById(strRowID);

if (m_intShow == 0)
{
objRow.style.display = "block";
var objCell = document.getElementById(strCellID);
objCell.innerHTML = "<img src=images/minus2.gif>";
m_intShow = 1;
}
else
{
objRow.style.display = "none";
var objCell = document.getElementById(strCellID);
objCell.innerHTML = "<img src=images/plus3.gif>";
m_intShow = 0;
};
}

The problem is here. You have a logic error. You have a global
variable called m_intShow. Now consider the steps you just went
through:

step 1. The value of m_intShow is 0. You click on a +. The value of
m_intShow is now 1.

step 2. You click on a different +. The value of m_intShow is 1,
therefore the display is still set to "none". The value of m_intShow is
now 0.

step 3. You click on the same + again. The value of m_intShow is 0,
therefore the display will now be set to "block".

That is the reason why you have to click twice.

[snip] }
}

runhide()
</script>

So everything works really good on load up, it loads the rows in the
tables. When the table is done, the javascript loads runhide() which
collapses all of the rows.

The javascript works fine when they click on the plus and it shows the
row, and when I click on the same plus it collapses. The problem
is...when I click the first cell, it shows the row, then If I want to
expand cell 2, I have to click it twice to get it to expand. Then when
I go to cell 1, I have to click twice to collapse it.

If anyone can correct my coding it would be appreciated, thanks.

[McKirahan]

"Samir" <dl*****@yahoo.com> wrote in message
news:11*********************@g49g2000cwa.googlegro ups.com...

[snip]

So everything works really good on load up, it loads the rows in the
tables. When the table is done, the javascript loads runhide() which
collapses all of the rows.

The javascript works fine when they click on the plus and it shows the
row, and when I click on the same plus it collapses. The problem
is...when I click the first cell, it shows the row, then If I want to
expand cell 2, I have to click it twice to get it to expand. Then when
I go to cell 1, I have to click twice to collapse it.

If anyone can correct my coding it would be appreciated, thanks.

This is a variation on your theme.
Test as-is. Watch for word-wrap.

<html>
<head>
<title>hideshow.htm</title>
<script type="text/javascript">
var a_intShow = new Array(0,0,0,0);
function ShowHide(intRowID,intCellID) {
var objRow = document.getElementById("MyRow"+intRowID);
if (a_intShow[intRowID] == 0) {
objRow.style.display = "block";
var objCell = document.getElementById("MyCell"+intCellID);
objCell.innerHTML = "<img src='_minus.gif'>";
a_intShow[intRowID] = 1;
} else {
objRow.style.display = "none";
var objCell = document.getElementById("MyCell"+intCellID);
objCell.innerHTML = "<img src='_plus.gif'>";
a_intShow[intRowID] = 0;
}
}
function runhide() {
var objs = new Array();
rowCount = a_intShow.length;
for (var i=1;i<rowCount;i++) {
objs[i] = document.getElementById("MyRow"+i).style.display =
"none";
}
}
</script>
</head>
<body onload="runhide()">
<table width="225" border="1">
<tr>
<td width="10" id="MyCell1" onclick="ShowHide(1,1)"><img
src="_plus.gif"></td>
<td width="205">blahasdfadfadfasd></td>
</tr>
<tr id="MyRow1">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="10" id="MyCell2" onclick="ShowHide(2,2)"><img
src="_plus.gif"></td>
<td width="205">blahasdfadfadfasd</td>
</tr>
<tr id="MyRow2">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="10" id="MyCell3" onclick="ShowHide(3,3)"><img
src="_plus.gif"></td>
<td width="205">blahasdfadfadfasd</td>
</tr>
<tr id="MyRow3">
<td>&nbsp;</td>
<td>
<table width="100%" border="0">
<tr>
<td>teadasdgadsf</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I changed the following:

1)
var a_intShow = new Array(0,0,0,0);
as added.

2)
rowCount = a_intShow.length;
was
rowCount = this.asdfform.txtAID.value;
as a form wasn't defined.

3)
objs[i] = document.getElementById("MyRow"+i).style.display =
"none";
was
(objs[i] = document.getElementById("MyRow"+i)).style.display =
"none";
though I don't understand why you use "objs".

4)
<body onload="runhide()">
was
runhide();
as the table wasn't declared before it was exceuted;
(at least after I moved the JS into the <head>).

I also removed a bunch of unnecessary
</strong></a></div>
and
</a.>
tags.

[Michael Winter]

On 28/09/2005 20:39, Samir wrote:

[snipped markup]

Why you have so many tables I'll never know, but...

[snip]

objRow.style.display = "block";

....do not use the block value to 'show' rows or other table components.
Table-related elements have their own special display property values.
Using other values will break rendering behaviour in conforming browsers
(IE is broken in this regard).

Instead, assign an empty string to the display property. This
effectively clears the none value, showing the row in whatever way the
browser happens to expect.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Samir]

McKirahan,

Thanks, The example I gave you, and you make it work perfect. I just
have one more question.

The reason I had rowCount = this.asdfform.txtAID.value was I forgot
this was also in the page too
<form name="asdfform">
<input type="text" name="txtAID" style="VISIBILITY: hidden"
value="<%=strCount%>">
</form>

I did a count in ASP and tells me how many rows I have, so I can
collapse at the load page.

The javascript you gave me works perfect!! except when I use it in my
actual page, it works for the first 3 rows and the rest is working but
not like the first three rows.
Any where to write the array to account for the rowCountValue??

Thanks for all your help so far.

[Samir]

Okay I think I got it, took some thinking but it's working so far!!

rowCount = this.asdfform.txtAID.value;
var a_intShow = new Array(rowCount);
for(var i=0;i<=rowCount;i++){
a_intShow[i] = 0
}

What do you think?

[RobG]

Samir wrote:

McKirahan,

Thanks, The example I gave you, and you make it work perfect. I just
have one more question.

The reason I had rowCount = this.asdfform.txtAID.value was I forgot
this was also in the page too
<form name="asdfform">
<input type="text" name="txtAID" style="VISIBILITY: hidden"
value="<%=strCount%>">
</form>

I did a count in ASP and tells me how many rows I have, so I can
collapse at the load page.
The number of rows in the table is given by the length of the table's
rows collection. You don't need the server to tell you how many there are.

var numberOfRows = someTableRef.rows.length;

The javascript you gave me works perfect!! except when I use it in my
actual page, it works for the first 3 rows and the rest is working but
not like the first three rows.
Any where to write the array to account for the rowCountValue??

You don't need to. All you need to do is show or hide cells that have
an index greater than zero in whatever row was clicked on. And the
hideShow function just needs to toggle between 'none' and ''.

That last bit is very important - the default value of a TD's display
attribute is not 'block', it is 'table-cell'. Since IE is broken in
this regard, you won't notice, but you will in other browsers.

<URL:http://www.w3.org/TR/REC-CSS2/tables.html#q5>

Switching between '' and 'none' allows it to return to whatever value
the browser likes without you having to know whether that was 'block' or
'table-cell' or some other value.

There have been several examples of how to do it posted in the last few
weeks, here's an example based on your posted code:

<table width="225" border="1" id="tableA">
<tr>
<td width="10"><img src="minus.gif"
onclick="showHideCells(this)"></td>
<td width="205">blahasdfadfadfasd</strong></a></td>
</tr>
<tr>
<td width="10"><img src="minus.gif"
onclick="showHideCells(this)"></td>
<td width="205">blahasdfadfadfasd</strong></a></td>
</tr>
<tr>
<td width="10"><img src="minus.gif"
onclick="showHideCells(this)"></td>
<td width="205">blahasdfadfadfasd</strong></a></td>
</tr>
</table>
<script type="text/javascript">

function showHideCells( el )
{
// Change the image between + and -
if (el.src.match('plus')){
el.src = el.src.replace(/plus/,'minus');
} else {
el.src = el.src.replace(/minus/,'plus');
}

// Find the parent td
while (el.parentNode && 'td' != el.nodeName.toLowerCase()){
el = el.parentNode;
}

// Run across all siblings and show/hide them
while (el.nextSibling){
el = el.nextSibling;
if (el.style){
el.style.display = ('none' == el.style.display)? '' : 'none';
}
}
}

// Initially hide the cells using showHideCells()
function runHide(id)
{
if ( ! document.getElementById
|| ! document.getElementsByTagName
|| ! document.body.style ) {
return;
}
var el = document.getElementById(id);
var rows = el.rows;
var i = rows.length;
while (i--){
showHideCells( rows[i].getElementsByTagName('img')[0]);
}
}

runHide('tableA');

</script>

--
Rob

[Samir]

RobG,

Thanks for the replay, your coding seems to work but not really the way
I had the example.

Your coding shows the the 3 rows and shows the first cell of each row
and hides the 2nd cell until it is clicked.

What I am doing in the ASP page;

I do a query to a database table, say the table has data for company
and in this table I have over 50. and each company has a related table
which stores what products they have available, one company can have
one, and other have many, so I guess it's call a one to many.

I can write it to work on ASP but it involves the user to reload, I
figure javascript would be a lot more efficient in showing and hiding
the table rows.

So basically the code looks like this. I also added some code to show
and hide for onlclicks which kinda works.

<table width="225" border="0">
<%
'Show all accounts on load
strQ = ""
strQ = strQ & "SELECT * from comptbl where compid != '' Order By
compID"
'Execute query<br>
strCount = 0
Set oRS = objConn.Execute(strQ)
If not oRS.EOF then
Do While NOT oRS.EOF
strCount = strCount + 1
'View accounts
%>
<tr>
<td width="10" id="MyCell<%=strCount%>"
onclick="ShowHide('<%=strCount%>','<%=strCount%>') "><img
src="images/plus3.gif"></td>
<td width="205"><div align="left"><strong><a
href="Details.asp?id=<%=oRS("compID")%>"
target="_main"><%=oRS("compID")%>
</strong></a></div></td>
</tr>
<tr id="MyRow<%=strCount%>">
<td>&nbsp;</td>
<td>
<%
sql = ""
rs = ""
sql = sql & "SELECT * from compProd where compID = '" & oRS("compID")
& "'"
sql = sql & " Order By name;"
Set rs = objConn.Execute(sql)
If not rs.EOF then
Do While NOT rs.EOF
%>
<table width="100%" border="0">
<tr>
<td><a href="Details.asp?pid=<%=rs("compID")%>" target="_main">
<%=rs("pid")%>, <%=rs("pName")%></a></td>
</tr>
</table>
<%
rs.MoveNext
Loop
rs.Close
Set rs=Nothing
End if
%>
</td></tr>
<%
oRS.MoveNext
Loop
oRS.Close
Set oRS = Nothing
End if
%>
</table>

<form name="asdfform">
<input type="text" name="txtAID" style="VISIBILITY: hidden"
value="<%=strCountclients%>">

<script type="text/javascript">
rowCount = this.asdfform.txtAID.value;
var a_intShow = new Array(rowCount);
for(var i=0;i<=rowCount;i++){
a_intShow[i] = 0
}

function ShowHide(intRowID,intCellID) {
var objRow = document.getElementById("MyRow"+intRowID);
if (a_intShow[intRowID] == 0) {
objRow.style.display = "block";
var objCell = document.getElementById("MyCell"+intCellID);
objCell.innerHTML = "<img src='images/minus2.gif'>";
a_intShow[intRowID] = 1;
} else {
objRow.style.display = "none";
var objCell = document.getElementById("MyCell"+intCellID);
objCell.innerHTML = "<img src='images/plus3.gif'>";
a_intShow[intRowID] = 0;
}
}

function runhide(){
var objs = new Array();
rowCount = this.asdfform.txtAID.value;
for(var i=1;i<=rowCount;i++){
(objs[i] =
document.getElementById("MyRow"+i)).style.display= "none";
}
}

function showusers(){
var objs = new Array();
rowCount = this.asdfform.txtAID.value;
for(var i=1;i<=rowCount;i++){
(objs[i] =
document.getElementById("MyRow"+i)).style.display= "block";
}
}

function showaccounts(){
var objs = new Array();
rowCount = this.asdfform.txtAID.value;
for(var i=1;i<=rowCount;i++){
(objs[i] =
document.getElementById("MyRow"+i)).style.display= "none";
}
}
</script>

So if you have any suggestions that would be great!

Thanks.