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

我会为该输入分配一个 ID，并尝试使用它来处理 jQuery 中的元素：

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


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

Answer 2

试试：

您需要在标签中添加表格内容..

$(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>