www.webdeveloper.com
Results 1 to 4 of 4

Thread: Use check box to un-hide entire table

  1. #1
    Join Date
    Jul 2014
    Posts
    2

    Use check box to un-hide entire table

    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

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    tables have kind of fallen out of favor since 2003, but here's one way to do it...

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

  3. #3
    Join Date
    Jul 2014
    Posts
    2
    Quote Originally Posted by xelawho View Post
    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

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    Quote Originally Posted by AGrayson84 View Post
    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...
    Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles