htmlの表はjqueryで動作しません

Question

これはなぜ機能しないのですか？私は、ユーザーが特定の入力要素にアクセスするのを防ぐために、表形式で表を表示および非表示にしようとしています。何をすべきか、ベストプラクティスは何かアドバイスしてください。ありがとうございました。 jQueryとHTMLへイム新しい：

HTMLとjQuery：

$(document).ready(function(){ 
 
$('#table1').hide(); 
 
}); 
 

 
$('input[name="both"]').click(function(){ 
 
$('#table1').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
<input type="radio" name="both" /> 
 
<label for="walk_in">Walk in</label> 
 
</p> 
 
<form> 
 
<table id="table1" name="table1"> 
 
    data1 
 
</table> 
 
<table id="table2" name="table2"> 
 
    data2 
 
</table> 
 

 
</form>

Answer 1

試してみてください。

あなたがタグにあなたのテーブルのコンテンツを追加する必要があります。..

$(document).ready(function(){ 
 
$('#table1').hide(); 
 
}); 
 

 
$('input[name="both"]').click(function(){ 
 
$('#table1').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<p> 
 
<input type="radio" name="both" /> 
 
<label for="walk_in">Walk in</label> 
 
</p> 
 
<form> 
 
<table id="table1" name="table1"> 
 
    <tr><td> data1 </td></tr> 
 
</table> 
 
<table id="table2" name="table2"> 
 
    <tr><td> data2 </td></tr> 
 
</table> 
 

 
</form>

Answer 2

私はその入力にIDを割り当てるとjQueryで要素に対処するためにそれを使用しようとする：

<input type="radio" id="my_input" name="both" /> 


$('#my_input').click(function(){ 
$('#table1').show(); 
});