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 bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to hide multiple rows with one click? 1

Status
Not open for further replies.
fedtrain

fedtrain

Instructor
Jun 23, 2004
142
US
I have a table that expands or collapses to show troubleshooting steps. I need the table to change the status of multiple rows with one click.

So in this example I need to get the hide1/show2 link to work.

Code: 
<html>
<script language=JavaScript>
function hideRow(obj) {
   if (document.getElementById(obj).style.display == "block")
   {document.getElementById(obj).style.display = "none";}
   else 
   {document.getElementById(obj).style.display = "block";}
}
</script>
<body>
<div align="center">
  <p><a href="#" onclick="hideRow('row1')">Hide/Show row1</a>
      <a href="#" onclick="hideRow('row2')">Hide/Show row2</a>
      <a href="#" onclick="hideRow('row3')">Hide/Show row3</a>
      <a href="#" onclick="hideRow('row4')">Hide/Show row4</a>    </p>
  <p><a href="#">Hide row1/Show row 2</a> <br>
    </p>
</div>
<table border=1px align="center">
<tr id=row1 style="display:block">
  <td>this is</td>
  <td>row 1</td>
</tr>
<tr id=row2 style="display:none">
  <td>this is</td>
  <td>row 2</td>
</tr>
<tr id=row3 style="display:none">
  <td>this is</td>
  <td>row 3</td>
</tr>
<tr id=row4 style="display:none">
  <td>this is</td>
  <td>row 4</td>
</tr>
</table>

<p align="center">This is test text to see what happens </p>
</body>
</html>

Thanks
TrainerDave

ps....this code also has the answer for my other post about having the row start out as hidden.

"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
Sort by date Sort by votes
Why not just hide/show the whole table?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Upvote 0 Downvote
I cannot hide the whole table. Some rows stay all the time, some rows start hidden.

When the hidden rows are reveiled I need to hide the rows with the original buttons and show another row of buttons.

Sorry I cannot post the example I am building but it is proprietary. If someone can show me how to make the example above work I can adapt it.

Thanks
TrainerDave





"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
Upvote 0 Downvote
According to Microsoft, you cannot hide/show just one or two rows of a table. Of course, they then go on to say that in order for some Excel stuff to work, you can. In my experience, it doesn't work.

If you are able to give all the columns in your table a specific width, just make multiple tables stacked one on top of the other (2 dimensionally on top, not 3 dimensionally) and hide/show a whole table? That works.

If you can't specify the column widths, it's very unlikely multiple tables will come out with the same column widths and look like a single long table. There IS a way around the problem, I've done it. It involves going thru each column of each table and finding the widest, then going back through and setting each column in each table to it's widest instance. Of course, it's not that simple. You can just simply get/set the column width - that doesn't work (at least in IE6). You have to use clientWidth (which I think is IE only), and you have to make adjustments for padding, etc. Like I said, I made it work, but just barely. My solution is probably only good for IE6, and if the window isn't wide enough and the text in the cells wraps, then the whole thing is off again.

You're better off hard-coding the column widths.


Meddle not in the affairs of dragons,
for you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Send the row nums as a comma separated string

Code: 
<html>
<script language=JavaScript>
function hideRows([blue]inStr[/blue]) {
   [blue]rowArr = inStr.split(",")[/blue]
   for (x=0; x<rowArr.length; x++){
      theRow = document.getElementById("row" + rowArr[x])
      theRow.style.display = theRow.style.display == "none" ? "block" : "none"
   }
}
</script>
<body>
<div align="center">
  <p><a href="#" [blue]onclick="hideRows('1,2,3,4')"[/blue]>Hide/Show Rows</a> </p>
</div>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Upvote 0 Downvote
Looks good....looks scary too 'cause I would not have come up with it myself.

Now I am getting:
Object doesn't support this property or method

It is pointing to the rowArr + inStr.split(",") line.

I have no idea what split is so I cannot troubleshoot it.

TrainerDave


"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
Upvote 0 Downvote
I believe that inStr is a reserved word. Try renaming that variable.

Meddle not in the affairs of dragons,
for you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Never mind....found it. I was missing the (')s in the list of values. Fixed it and it works now.

tsdryden, I have no idea what you are saying, my example above shows that you can hide and show rows. I am doing it now, so not sure what you were getting at.

I'll be back if this blows up.
Thanks
TrainerDave

"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
Upvote 0 Downvote
I'm not saying it can't be done, just that MS says it can't be done, except...

I'm also saying that I had trouble doing it, but it was probably because of the strange problem with the display attribute rather than hiding the rows per se. By the time I found the problem with the display attribute I'd already found an alternative to showing/hiding individual rows.


Meddle not in the affairs of dragons,
for you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
424
gmmastros
gmmastros
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
690
Rayj0000
Rayj0000
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
743
coldbohemia
coldbohemia
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
815
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top