/    Sign up×
Community /Pin to ProfileBookmark

How to hide a table as the page loads?

Copy linkTweet thisAlerts:
Sep 13.2004

How do you hide a table as the page loads?
Let’s say iv 2 table in one form.

[code]
<form name=”form1″ method=”post” action=””>
<table width=”75%” border=”1″ id=”1″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<table width=”75%” border=”1″ id=”2″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp; </p>
</form>
[/code]

as i load this page, i want table 2 to be hidden.
What’s the javascript code for that?

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycSep 13.2004 — Not javascript, but css

#2 { display:none }

or


#2 { visibility:hidden }
Copy linkTweet thisAlerts:
@kblazeauthorSep 14.2004 — ah ic. can u pls post the complete code? coz i dont know anything bout css.

just use the code above as a sample. thanks
Copy linkTweet thisAlerts:
@JPnycSep 14.2004 — in the head section of the page:

<style type="text/css">

#2 { display:none }

</style>
Copy linkTweet thisAlerts:
@kblazeauthorSep 14.2004 — ok i got it. it works. thanks so much!
Copy linkTweet thisAlerts:
@kblazeauthorSep 14.2004 — Can u col the css as a function?

let's say i have 2 paages, page 1 n page 2.

In page 1, i have 2 hyperlinks, one link passes the variables showtable1="true" and showtable2="false" and the other table passes the variables showtable1="false" and showtable2="true".

aftr clicking the hyperlink i will be direct to page 2. if i click the first hyperlink i want to call the css function to showtable2 and hide table 1. how can i do that using variables?
Copy linkTweet thisAlerts:
@javaNoobieSep 14.2004 — you will have to play with the style properties or assign a css class to the respective table that you wish to hide. probably something likevar tblToHide;

tblToHide = (showTable1)? '1' : '2';

document.getElementById(tblToHide).style.display = 'none'
Copy linkTweet thisAlerts:
@kblazeauthorSep 14.2004 — so how will u do it if u get the variable from the 1st page.

let's say the 2nd page gets:

String showtable1 = request.getParameter("showtable1");

String showtable2 = request.getParameter("showtable2");

if(showtable1.equals("yes"))

{

[b]HOW DO YOU CALL CSS where table 1 will be shown while table 2 will be hidden?[/b]

}

else

{

[b]HOW DO YOU CALL CSS?[/b]

}
Copy linkTweet thisAlerts:
@javaNoobieSep 14.2004 — if(showtable1.equals("yes"))

{

[b]HOW DO YOU CALL CSS where table 1 will be shown while table 2 will be hidden?[/b]

}

else

{

[b]HOW DO YOU CALL CSS?[/b]

}[/quote]
<i>
</i>var tblToHide;

tblToHide = (showTable1.equals('yes'))? '2':'1';

document.getElementById(tblToHide).style.display = 'none';
Copy linkTweet thisAlerts:
@kblazeauthorSep 14.2004 — one more question...

why is it that if you hide a table, the text below that table doesn't go up.

Ok, for a better view, let's say i have 2 tables and 2 radio buttons.

table 1 is displayed first n table 2 is displayed below table 1.

if i click the 1st radio button, the table 1 will be shown and table 2 will hide. and if i choose radio button 2, table 1 will hide while table 2 will be shown.

if i do click radio button 2, y is it that table 2 still display in the same position, y is it that table 2 did not go up coz table is hidden.

how will i do this? i know that using layers will answer my question but what if i dont wana use layers.
Copy linkTweet thisAlerts:
@javaNoobieSep 14.2004 — hm.. that should not be the case if you are using the 'display' css property.. that will happen if you are using the 'visibility' css property. A simple demo
[code=php]<html>
<head>
<title></title>
<script type="text/javascript">
function hideTbl(val1,val2){
var tblToHide = 'tbl' + val1
var tblToShow = 'tbl' + val2

/*Play around with the following styles*/

// document.getElementById(tblToHide).style.display = 'none';
// document.getElementById(tblToShow).style.display = 'block';

document.getElementById(tblToHide).style.visibility = 'hidden';
document.getElementById(tblToShow).style.visibility = 'visible';
}
</script>
</head>
<body>
<form>
<input type="radio" value="Rad1" name="Rad" onclick="hideTbl('1','2')">Table One
<input type="radio" value="Rad2" name="Rad" onclick="hideTbl('2','1')">Table Two
<table id="tbl1">
<tr>
<td>
This is table one
</td>
</tr>
</table>
<table id="tbl2">
<tr>
<td>
This is table two
</td>
</tr>
</table>
</form>
</body>
</html>[/code]
×

Success!

Help @kblaze spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...