Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Simple table

  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple table

    Hi,

    I am trying to create a radio button that when clicked shows a table. IF you can recommend a way to do it without Javascript that would be MOST helpful. Otherwise here is what I've got so far:

    [CODE]<input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics
    <input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History
    </p>

    <script type="text/javascript">
    var c = true;
    var b = true;

    function OnProductClick(product) {
    if ((c) && (product.value == "Stats")) {
    document.getElementById('St').style.display = "block";
    c = false; b = true;
    }

    else if ((b) &&(product.value == "Tradinghistory")) {
    document.getElementById('TrdH').style.display = "block";
    c = true; b = false;
    }

    }
    </script>[CODE]

    Where St and TrdH are 2 seperate div ids for 2 different tables.


    Please Help.


    Many Thanks

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Greetings gentle person.
    Here is some code if it
    does not suit your needs
    or if you have any question
    please do post again.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    
    <script type="text/javascript">
    function OnProductClick(product) {
    	if (product.value == "Stats") {
    		document.getElementById('St').style.display = "block";
    		document.getElementById('TrdH').style.display = "none";;
    	} 
    	else if (product.value == "Tradinghistory") {
    		document.getElementById('TrdH').style.display = "block";
    		document.getElementById('St').style.display = "none";
    	} 
    }
    </script>
    <style type="text/css">
    .hidden{display:none;}
    </style>
    </head>
    <body>
    <form name="form1" action="" onsbumit="return false;">
    <p><input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics
    <input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History
    </p>
    </form>
    <div class="hidden" id="St">stats table goes here</div>
    <div class="hidden" id="TrdH">Tradinghistory table goes here</div>
    </body>
    </html>
    Have a most enjoyable day.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you.

    I'm trying it but it's still not working for some weird reason.

    Could you run the code that you sent me and see if it works please?

    Thanks again

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Yes, no problem.
    I did a copy and paste
    and tried it in Firefox
    and ie8, what browser
    are you using ?
    and what results do
    you get ?

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm using Chrome. Your version works fine. I mean I run it and it is fine. But then when I integrate it into my code it just doesn't work.

    Can I ask a big favour of you please. Can I send you my full code and you have a look at it, maybe you can spot something wrong with it that I can't. Would be a BIG help.
    Last edited by Belloshoes; 09-16-2011 at 12:05 AM.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Well if you could provide a link
    there are others here who would
    be interested in seeing your code
    if you think it is too much to post
    here, I've seen some very large
    scripts here. You can always contact
    me by clicking on my username
    then clicking on contact info.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Here is another way....

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <style type="text/css">
    .hidden{display:none;}
    </style>
    </head>
    <body>
    <form name="form1" action="" onsbumit="return false;">
    <p><input type="radio" name="product" onclick="document.getElementById('St').style.display = 
    
    'block';document.getElementById('TrdH').style.display = 'none';" value="Stats" />Statistics
    <input type="radio" name="product" onclick="document.getElementById('TrdH').style.display = 
    
    'block';document.getElementById('St').style.display = 'none';" value="Tradinghistory" /> 
    
    Trading History
    </p>
    </form>
    <div class="hidden" id="St">stats table goes here</div>
    <div class="hidden" id="TrdH">Tradinghistory table goes here</div>
    </body>
    I'm going to guess (not a good thing for me usually)
    that your tables are generated serverside with php
    or asp Or clientside with javascript and you are
    having trouble getting them into the divs, so far I'm
    about 90% on guesses(wrong of course)
    Last edited by DaveyErwin; 09-16-2011 at 12:34 AM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    and while we're collecting options...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <script type="text/javascript">
    function OnProductClick(style1,style2) {
    		document.getElementById('St').style.display = style1;
    		document.getElementById('TrdH').style.display = style2;
    	} 
    
    </script>
    
    <form name="form1" action="" onsbumit="return false;">
    <p><input type="radio" name="product" onclick="OnProductClick('block','none')" value="Stats" />Statistics
    <input type="radio" name="product" onclick="OnProductClick('none','block')" value="Tradinghistory" /> Trading History
    </p>
    </form>
    <div style="display:none" id="St">stats table goes here</div>
    <div style="display:none" id="TrdH">Tradinghistory table goes here</div>
    
    
    </body>
    </html>


  •  

    Posting Permissions

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