Блог

Главная - Вопросы по программированию - как мы скрываем и показываем таблицу при нажатии на radio bullton

как мы скрываем и показываем таблицу при нажатии на radio bullton

#javascript

#javascript

Вопрос:

У меня есть две таблицы. Я хочу показывать одну таблицу при нажатии первой переключающей кнопки. Затем, когда я нажимаю на второй переключатель, отображается другая таблица.

Ответ №1:

Зацените:

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>

НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ПОСМОТРЕТЬ ДЕМОНСТРАЦИЮ

Ответ №2:

используйте jQuery .show() API для быстрого, простого и совместимого с браузером решения:

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