Show/Hide table row

[Marine1969]

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?

.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;
}

 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>";

 

[spamjim]

forum215 would be a better place to discuss.

This seems unusual:

\\margin-bottom...

 

[Marine1969]

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

 

[vacunita]

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

 

[Marine1969]

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.

<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 } ?>

 

[vacunita]

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

 

[Marine1969]

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

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

 

[vacunita]

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:

 if [b]([/b](document.getElementById(rowId).style.display=="none")[b] || (document.getElementById(rowId).style.display== "")[/b]){

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

 

[Marine1969]

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.

 

[vacunita]

Try this:

 if (document.getElementById(rowId).style.display=="none" || document.getElementById(rowId).style.display=="") {
	 	document.getElementById(rowId).style.display = "[b]block[/b]";
	 }
	 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

 

[Marine1969]

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

 

[vacunita]

That worked for me with this short example:

<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