×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Show/Hide table row

Show/Hide table row

Show/Hide table row

(OP)
I know this is more of a css issue but wondered if anybody had an idea here. I have everything set except 1 issue. The show/hide works when I do not style the row. When I style the row it only show/hides about 10px. Below is the css and the code...

As mentioned this works when the .tbl2 {display: none;} is not there. Any suggestions?

CODE --> css

.tbl2 {
   overflow-x:auto;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #000;
  \\margin-bottom: 15px;
   display: none;
}
.tbl2 tr:hover {
   background: #F2F2F2;
}
.tbl2 th {
   background: linear-gradient(#fff, purple);
   border: 1px solid gray;
   border-radius: 25px;
}
.tbl2 td {
   border: 1px solid gray;
   padding: 2px;
} 

CODE --> php

echo "<tr id='" . $row['cstnum'] . "'><td colspan='8'>";
           echo "<table class='tbl2'>"
              . "<tr><th>Billing Address</th><th>Shipping Address</th><th>Contacts</th><th>Info</th></tr>"
              . "<tr><td>" . $row['baddr'] . "<br>" . $row['bcity'] . ", " . $row['bst'] . " " . $row['bzip'] . "</td>"
                  . "<td>" . $row['saddr'] . "<br>" . $row['scity'] . ", " . $row['sst'] . " " . $row['szip'] . "</td>"
                  . "<td>Phone 2: (" . substr($row['phone2'], 0,3) . ") " .  substr($row['phone2'], 3,3) . " - " .  substr($row['phone2'], -4) . "<br>"
                  . "Fax: (" . substr($row['fax'], 0,3) . ") " .  substr($row['fax'], 3,3) . " - " .  substr($row['fax'], -3) . "<br>"
                  . "Contact: " . $row['contact'] . "<br>"
                  . "Con Phone: (" . substr($row['cphone'], 0,3) . ") " . substr($row['cphone'], 3,3) . " - " . substr($row['cphone'], -4) . "</td>"
                  . "<td>Lic Exp: " . $row['expiration'] . "<br>Route: " . $row['route'] . "<br>Notes: " . $row['notes'] . "</td></tr></table>";
       echo "</td></tr>"; 

RE: Show/Hide table row

(OP)
it's just a comment. I put in the tradional ones.

RE: Show/Hide table row

How are you showing the row then? All the CSS you show does it completely hide an element with a class of tbl2 since it sets its display to none. In your case the class is applied to a table, so its hiding an entire table, not a single row. There's nothing in the rest of your code that tells us how you are then showing the table.

Also since PHP has no real bearing on what happens in the browser after its run, the show hide issue would have no relation to your PHP code.

Are you using some Javascript to then show the Table?

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: Show/Hide table row

(OP)
Sorry, I forgot I have the javascript function at the bottom of the page. Also, tbl2 is a nested table that takes up an entire row of tbl1. As the iteration progresses row 1 is limited customer data, row 2 is the nested table with the rest of the customer data (supposed to be hidden until the view button is clicked for that customer and shows the rest of the data), row 3 is the next customer, etc.

CODE --> javascript

<script type="text/javascript">
function showRow(rowId) {
    document.getElementById(rowId).style.display = "";
}
function showhideRow(rowId) {
	 if (document.getElementById(rowId).style.display=="none") {
	 	document.getElementById(rowId).style.display = "";
	 }
	 else{document.getElementById(rowId).style.display = "none";}
    //document.getElementById(rowId).style.display = "none";
    //alert(document.getElementById(rowId).style.display);
}
</script>
<?php } ?> 

RE: Show/Hide table row

And where are you calling the JS function?

What rowId are you passing the JS function when you call it?

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: Show/Hide table row

(OP)
The js actually works. Let me reset...I have a table (tbl) with base customer info on odd numbered rows, even numbered rows have a nested table (tbl2) which is supposed to be hidden until the user clicks on the View button. When the page loads all even numbered rows are supposed to be hidden with the css set as...

CODE --> css

.tbl2 {
   overflow-x:auto;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #000;
   /*margin-bottom: 15px;*/
   display: none;
} 

The problem is when "display: none;" is there tbl2 row will not show. I comment that line out ("/*display: none;*/"), the page loads with the correct tbl2 row visable. Here's the rub...when clicking on the View button it works perfectly! This tells me the rowid is correct, the javascript is correct, and loading the tables is correct. The question is how can I get the page to load with all tbl2 rows hidden and the js working for the row they want to view?

RE: Show/Hide table row

I'm confused. Your original issue was that the show hide only affected 10px. Your JS can in no way result in that behavior.

You are now saying it does not work at all. The only issue I can see with the JS is that while you are checking for the row to be hidden, the first time its loaded the style.display value is empty for JS. i.e Js can only see style values it has set.
i.e your conditional: if (document.getElementById(rowId).style.display=="none") will not trigger with the first click.

If you click it a second time, it should work.

To solve this issue, add a secondary condition:

CODE

if ((document.getElementById(rowId).style.display=="none") || (document.getElementById(rowId).style.display== "")){ 

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: Show/Hide table row

(OP)
No luck. ANd yes, the issue of having the 10 pixels after the first row still exist if I have "display: none" in the css on loading. I have attached a few screenshots. The "display: none" pic is when it loads with the css "display: none" in place. You can see the line spacing, not a big deal because I believe it will go away once I get it working correctly. When I remove the "display: none" from the css and load the page the screen shot "Open" is how the page loads. "Closed" is the pic of how it looks when when I close all the tbl2 rows. "Single" is the pic how I know the code works because I can close each tbl2 row and open them individually.

RE: Show/Hide table row

Try this:

CODE

if (document.getElementById(rowId).style.display=="none" || document.getElementById(rowId).style.display=="") {
	 	document.getElementById(rowId).style.display = "block";
	 }
	 else{document.getElementById(rowId).style.display = "none";} 






----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: Show/Hide table row

(OP)
No luck. Tbl2 rows were all open and it also caused them to not close at all.

RE: Show/Hide table row

That worked for me with this short example:

CODE

<style type="text/css">
table
{
	border:1px solid black;
}

table td
{
	border:1px solid gray;
}

table#hidethis
{
	display:none;
	width:100%;
	background-color:#fff;
	border-color:#0089de;
}

table tr td#hiddenRow
{
	background-color:#e6e6e6;
	text-align:center;
}
</style>
<script type="text/javascript">
function hideStuff(hideID)
{
	var tohide = document.getElementById(hideID);
	
	if(tohide.style.display=="none")
	{
		tohide.style.display = "inline-block";
	}
	else
	{
		tohide.style.display = "none";
	}

}

</script>

<table>
<tr><td>Table row</td><td>some other stuff</td><td>Third Column</td></tr>
<tr><td id="hiddenRow" colspan="3">
	<table id="hidethis"><tr><td>Inner row 1</td><td>Inner Row 2</td><td>Inner Row 3</td></tr></table>
</td></tr>
</table>

<button onclick="hideStuff('hidethis');">Hide it</button> 

If its not working, then something else is going on. Check the browser's console for any JS errors that may be happening now.




----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close