collapse and uncollapse tables

S

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 = 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.
 
W

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;
};
}
Click to expand...

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]
 
M

McKirahan

[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.
Click to expand...

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 = 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 = document.getElementById("MyRow"+i).style.display =
"none";
was
(objs = 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.
 
M

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";
Click to expand...

....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
 
S

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.
 
S

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 = 0
}

What do you think?
 
R

RobG

Samir said:
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.
Click to expand...

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??
Click to expand...

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.getElementsByTagName('img')[0]);
}
}

runHide('tableA');

</script>
 
S

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 = 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 =
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 =
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 =
document.getElementById("MyRow"+i)).style.display="none";
}
}
</script>

So if you have any suggestions that would be great!

Thanks.
 

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
Angularjs newbie - second JSON datasource does not display 0
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
How to have two html audio players on one page? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
Can anyone please help? HTML - two tables applying different styles 4

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 146

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,162
Latest member
GertrudeMa

Latest Threads

Top