Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expand / Collapse table cells 2

Status
Not open for further replies.
ksbigfoot

ksbigfoot

Programmer
Apr 15, 2002
856
CA
I have the following code:
Code: 
<script type="text/javascript">
function handleClick(Obj,imagen)  {
    if(document.getElementById(Obj).style.display=='none') {
        document.getElementById(Obj).style.display = "";
        document.getElementById(imagen).src="images/minus.gif";
        
    }
      else {
          document.getElementById(Obj).style.display = "none";
          document.getElementById(imagen).src="images/plus.gif";
          
      }
}
</script>
<img src="images/minus.gif" id="gif1" onclick="handleClick('to_col1','gif1')" align="left">
<div id="to_col1">
<table border="1">
<tr>
  <td>Col 1</td>
  <td>Col 2</td>
</tr>
<tr>
  <td>One</td>
  <td>Two</td>
</tr>
<tr>
  <td>Three</td>
  <td>Four</td>
</tr>
</table>
</div>

and I want the heading (Col1 & Col2) to stay, but hide all the rows beneath it (One, Two, Three, Four)
Is that possible?
Or do I have to hide the whole table?
I know I could put the heading (Col1 & Col2) outside the table and then hide the table, but I was wondering if it could be done being left in the table.
Thanks
 
Sort by date Sort by votes
here's a quick example:
Code: 
<script type="text/javascript">

var rowVisible = true;

function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}

</script>

<table id="theTable" border="1">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
Wow, I don't know if its the code or you guys that amaze me, maybe both.

Works perfectly. Star to you.
Thanks again,
ksbigfoot
 
Upvote 0 Downvote
It's probably just me [smile]

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
kaht,

if you could point me to a hint how to make this script work the same, but initially hide "theTable" - i would owe you some!

thanks in advance!

schnuck
 
Upvote 0 Downvote
Howdy schnuck,

To initially hide the table, you could use:
Code: 
<body onload="theTable.style.display='none'">
But then you would need to have a button or something to display the table.
Hope this helps
ksbigfoot
 
Upvote 0 Downvote
Howdy schnuck,

I changed the function to this and then it shows the table after the first click of the button.
This is the line I added:
Code: 
tbl.style.display="";
the full function:
Code: 
<script type="text/javascript">

var rowVisible = true;

function toggleDisplay(tbl) {
   tbl.style.display="";
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}

</script>
 
Upvote 0 Downvote
many thanks again!

but weird, this doesn't work for me. the table is still there when the page loads. only the body onload helped yo far.

cheers,

schnuck
 
Upvote 0 Downvote
Make the following changes schnuck:
Code: 
<script type="text/javascript">

var rowVisible = [!]false[/!];

function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "[!]table-row[/!]";
      }
   }
   alert(tblRows.length);
   rowVisible = !rowVisible;
}

</script>

[!]<style type="text/css">

table#theTable tr {
   display:none;
}

table#theTable tr.headerRow {
   display:table-row;
}

</style>[/!]

<table id="theTable" border="1">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />

Now, this solution is a little screwy. It works fine in firefox - as it should. It goes a little wonky though. I'm thinking it might be because I've not included a doctype in this example, but IE didn't like the table-row display type. If you replace the 2 instances of table-row above with block, it will work fine in IE, but then firefox gets screwed up (which it should - table rows are not block level elements). I suggest playing around with some combination of the 2 - or try using a doctype or something. Or, if IE is your only audience (if it's a closed network) then just use the block solution.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Howdy schnuck,

I don't know what to say, it works in my IE browser.
I would suggest that you follow kaht's example as I am just a beginner.

Here is my full page that I used that worked:
Code: 
<html>
<head>
	<title>Untitled</title>
</head>

<body onload="theTable.style.display='none'">
<script type="text/javascript">

var rowVisible = true;

function toggleDisplay(tbl) {
   tbl.style.display="";
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}

</script>

<table id="theTable" border="1">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />

</body>
</html>
Hope this helps
 
Upvote 0 Downvote
thanks! it somehow runs now! i am now trying to implement it into a more designed table just to see how it will work.

:)

cheers,

s
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
637
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
660
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
597
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
143
TheLazyPig
TheLazyPig
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
183
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top