jquery 在 table 的 td 块外调用 div 时隐藏和显示不起作用

Question

在这里，当我点击 No 时，文本框应该被隐藏，但它并没有发生。当我从调用 onclick 事件的位置将相同的 div 放入 td 时，它正在工作。

<!DOCTYPE html>
<html>
    <head>
    <script>   
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#data").show();
            });
            $("#btn2").click(function(){
                $("#data").hide();
            });
        });
    </script>
</head>

<table>
    <tr>
        <th>Table</th>
        <td>
            <input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
            <input type="radio" id="btn2" name="gate" value="E" >No</input>  
        </td>
    </tr>

    <div id="data" style="padding-top: 10px">
        <tr>
            <th>GATE</th>
            <td><input type="text" name="gate1" value=gate1 size="20"></td>
        </tr>
    </div>
</table> 
</html>

Answer 1

看看

 $(document).ready(function(){
  $("#btn1").click(function(){
  $("#data").show();
 });
 $("#btn2").click(function(){
  $("#data").hide();
 });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   
</script>

</head>

<table>
<tr>
<th>Table</th>
<td>
  <input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
  <input type="radio" id="btn2" name="gate" value="E" >No</input>  
</td>
</tr>
<tr  id="data">
<th>GATE</th>
<td><input type="text" name="gate1" value=gate1 size="20"></td>
</tr>


</table> 
</html>

Answer 2

您将 div 放在 table 中 - 您不应该这样做。试试这个代码：

    $(document).ready(function() {
      $("#btn1").click(function() {
        $(".data").show();
      });
      $("#btn2").click(function() {
        $(".data").hide();
      });
    });

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<table>
  <tr>
    <th>Table</th>
    <td>
      <input type="radio" id="btn1" name="gate" value="N" checked/>Yes
      <input type="radio" id="btn2" name="gate" value="E" />No
    </td>
  </tr>

  <tr class="data" style="padding-top: 10px">
    <th>GATE</th>
    <td>
      <input type="text" name="gate1" value=gate1 size="20">
    </td>
  </tr>

  <tr class="data" style="padding-top: 10px">
    <th>GATE</th>
    <td>
      <input type="text" name="gate2" value=gate2 size="20">
    </td>
  </tr>

</table>

</html>

jquery 在 table 的 td 块外调用 div 时隐藏和显示不起作用

jquery hide and show is not working when the div is called outside td block of table

javascript

jquery

html

css

css-tables