...

View Full Version : Hiding table.



xtreempje
05-15-2010, 02:49 PM
How do I hide a table?

My Javascript :

<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>

My PHP to make hiden part visible :

<a href="javascript:showdiv()"><img src="login.png"></a>

My PHP table i want to hide :

<div id="hideshow" style="visibility: hidden">
<table cellpadding="0" cellspacing="3">
<tbody><tr>
<br><br><br><label for="loginuser"><strong>Select your recovery question :</strong> </label></td>
<td align="left">
<select size="1" name="question"><option selected
value="What is your mother's maiden name?">What is your mother's maiden
name?</option> <option value="What was the name of your first school?">What
was the name of your first school?</option> <option
value="Who is your favorite super hero?">Who is your favorite super
hero?</option> <option value="What is the name of your first pet?">What is the
name of your first pet?</option> <option
value="What place did you like to visit as child?">What place did you like to
visit as child?</option> <option
value="Who is your favorite cartoon character?">Who is your favorite cartoon
character?</option> <option
value="What was the first name of your first teacher?">What was the first name
of your first teacher?</option> <option
value="What TV show did you like as a child?">What TV show did you like as a
child?</option> <option value="What city was your mother born in?">What city
was your mother born in?</option> <option
value="What is your favorite movie?">What is your favorite movie?</option>
<option value="What city were you born in?">What city were you born
in?</option> &lt;\SELECT&gt;</select>
<label for="loginpass"><strong>Awnser:</strong> </label></td>
</td></div>
</tr>
<tr>
</td>
<td align="left"><input name="loginpass" id="loginpass" maxlength="10" tabindex="2" accesskey="p" style="width: 150px;" type="password"></td>
</tr>
<tr>
<td></td>
<td style="line-height: 18px; text-align: left;">
<span class="size10"><button type="submit" name="loginsubmit" id="loginsubmit" tabindex="6" class="button">Save</button></b></a></span>
<br>

</tr>
</tbody></div>

but all it does is just hide 1 part.
how can i make the whole table hiden? and when i click the javascript image it will all appears.?

bad english im sorry.

rvincenten
05-15-2010, 03:44 PM
<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.display = 'block';
}
else { // IE 4
document.all.hideshow.style.display = 'block';
}
}
}
</script>

(looks cleaner as people without javascript will just see a link that goes to the top of the page)

<a href="#" onclick="showdiv(); return false"><img src="login.png"></a>


<div id="hideshow" style="display:none"> [...] </div>Note that people without javascript will not be able see the form at all. Also, validate your HTML code. There's a lot of errors in it (such as closing div's nested in a table row).

xtreempje
05-15-2010, 03:51 PM
Thank you for the reply but this just makes 1 thing hiden.

now my dropdown box is hiden. but i want the table to be hiden.
------------------------------------

I tried a diffrent code, it will make the whole table disapear.
but when you load the page its still there, untill i click the button then it disapear, but i want it vice versa ( srry translated that with google ).

I want to start the table invisible and when i click the image ( button ) it will become visible.

My PHP table :

<table id="hintzTable" table cellpadding="4" cellspacing="10">
<br><br><br><label for="loginuser"> </label></td><div id="hideshow" style="display:none">
<td align="right"><label for="anwser"><strong> </strong></label></td><td align="middle">
<p>
<br><strong>Select your recovery question
:</strong><br><br><select size="1" name="question"><option selected
value="What is your mother's maiden name?">What is your mother's maiden
name?</option> <option value="What was the name of your first school?">What
was the name of your first school?</option> <option
value="Who is your favorite super hero?">Who is your favorite super
hero?</option> <option value="What is the name of your first pet?">What is the
name of your first pet?</option> <option
value="What place did you like to visit as child?">What place did you like to
visit as child?</option> <option
value="Who is your favorite cartoon character?">Who is your favorite cartoon
character?</option> <option
value="What was the first name of your first teacher?">What was the first name
of your first teacher?</option> <option
value="What TV show did you like as a child?">What TV show did you like as a
child?</option> <option value="What city was your mother born in?">What city
was your mother born in?</option> <option
value="What is your favorite movie?">What is your favorite movie?</option>
<option value="What city were you born in?">What city were you born
in?</option> &lt;\SELECT&gt;</select></p>
<p align="left">
<label for="loginpass"><strong>Awnser:</strong> </label></p>
<p align="left">
<label for="loginpass">&nbsp;<input name="loginpass" id="loginpass" maxlength="10" tabindex="2" accesskey="p" style="WIDTH: 150px" type="password">
<span class="size10"><button type="submit" name="loginsubmit" id="loginsubmit" tabindex="6" class="button">Save</button></span> </label></p></td></td>
</tr>
<tr></td>
<td align="left"></td>
</tr>
<tr>
<td></td>
<td style="LINE-HEIGHT: 18px; TEXT-ALIGN: left">
<span class="size10"></b></a></span>&nbsp;
<br></td>

</tr>
</tbody>
<div></div></table></body></html>

My javascript :

<script type="text/javascript">
function tableHide(){
document.getElementById("hintzTable").style.display = "none";
}
function tableShow(){
document.getElementById("hintzTable").style.display = "block";
}
function tableHideV(){
document.getElementById("hintzTable2").style.visibility = "hidden";
}
function tableShowV(){
document.getElementById("hintzTable2").style.visibility = "visible";
}
function tableHideX(){
var rows = document.getElementsByTagName("tr");
if(document.getElementById("ButtonText").innerHTML == "Hide Bottom"){
document.getElementById("ButtonText").innerHTML = "Show Bottom";
for(i=0; i<rows.length; i++){
if(rows[i].className == "hideable")
rows[i].style.display = "none";
}
}else{
document.getElementById("ButtonText").innerHTML = "Hide Bottom";
for(i=0; i<rows.length; i++){
if(rows[i].className == "hideable")
rows[i].style.display = "table-row";
}
}
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum