Use check box to un-hide entire table

This site is best viewed in a modern browser with JavaScript enabled.

AGrayson84

Hello everyone. I'm brand-new to the forum. I have been finding a lot of helpful code on this forum to help me do my first web-site since 2003 or so. I have been searching all over Google and this forum for this one and an't seem to find a script that functions exactly how I want, and was hoping someone could lend a hand.

I'm looking to have a check box, un-checked by default, to display a hidden, entire table when checked.

I basically have 2 tables for a form I am working on. The first table will always show all contents (input fields and labels), but I would like a checkbox that I can place near the bottom of the first table, that when checked, it displays the second table (with more input fields and labels) that was hidden by default. I'm not looking to hide/show individual <tr> or <td> sections, but an entire <table>.

Any assistance would be greatly appreciated!

Best Regards,
Andrew

xelawho

tables have kind of fallen out of favor since 2003, but here's one way to do it...

<head>
<style>
#mytable{
border: 1px solid black;
display:none;
}
</style>
</head>

<body>
Show table: <input type="checkbox" id="cb"> 
<table  id="mytable">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("cb").onclick=function(){
document.getElementById("mytable").style.display=this.checked?"table":"none";
}
</script>
</body>

AGrayson84

xelawho;1346617 wrote:
tables have kind of fallen out of favor since 2003, but here's one way to do it...

Haha. Fine.... how about iFrames???

Guess I have some catching up to do on today's web development tactics. I'm not sure what else will allow me a label aligned to the left, and to the right of that an input field aligned to the right. I never do borders on my tables though so they stay looking invisible, if that helps.

Anyhow, that code worked PERFECTLY! Did exactly what I needed, all I need to do was remove the border on the hidden table (personal preference of course). Thank you so much for the help!!

-Andrew

xelawho

AGrayson84;1346621 wrote:
Guess I have some catching up to do on today's web development tactics. I'm not sure what else will allow me a label aligned to the left, and to the right of that an input field aligned to the right. I never do borders on my tables though so they stay looking invisible, if that helps.

it's more about page load time and the ability for search engines to access your content. I'm not much good at CSS (there is a separate branch on the forum for that), but here's a hacky way of achieving what you're talking about...

<head>
<style>
html,body{width:100%}
.spleft{position:absolute}
.inright{position:absolute; right:50%}
.line{margin-bottom:5px}
#mytable{display:none}
</style>
</head>

<body>
Show table: <input type="checkbox" id="cb"> 
<div id="mytable">
<div class="line">
<div class ="spleft">one</div>
<input class ="inright"/><br>
</div>
<div class="line">
<div class ="spleft">two</div>
<input class ="inright"/><br>
</div>
<div class="line">
<div class ="spleft">three</div>
<input class ="inright"/>
</div>
</div>

<script type="text/javascript">
document.getElementById("cb").onclick=function(){
document.getElementById("mytable").style.display=this.checked?"block":"none";
}
</script>
</body>