how we hide and show table on radio bullton clicking

I have two tables. I want to show one table when the first radio button is clicked. Then show a different table when I click开发者_高级运维 on the second radio button.

Check-it Out:

JQUERY:

$("#Radio1").click(function(){
    $("#Table2").hide();
    $("#Table1").show();
});
$("#Radio2").click(function(){
    $("#Table1").hide();
    $("#Table2").show();
});

HTML:

<input type="radio" id="Radio1" name="rd"/>
Click on this radio button to show Table 1
<br />
<input type="radio" id="Radio2" name="rd"/>
Click on this radio button to show Table 2
<br />
<table id="Table1" border="1" cellpadding="0" cellspacing="0" style="display:none;width:200px;">
    <tr>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
        <td>11</td>
        <td>11</td>
    </tr>
</table>
<br />
<table id="Table2" border="1" cellpadding="0" cellspacing="0" style="display:none;width:200px;">
    <tr>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
    </tr>
</table>

CLICK HERE TO SEE THE DEMO

use jQuery .show() API for fast, easy and browser compatible solution:

$("#radio1").click(function(e){$("#table1").show();});
$("#radio2").click(function(e){$("#table2").show();});