Question

我有2个表，一开始我想隐藏表2，当我单击验证按钮时，我想隐藏表1并显示表2，但就我而言，他隐藏了所有表，帮助请给我。我的桌子：

<div id="output">
    <p>some injected &lt;p&gt;</p>
    <p>some injected &lt;p&gt;</p>
    <p>some injected &lt;p&gt;</p>
    <div id="typing-indicator">typing indicator</div>
    <p>some injected &lt;p&gt;</p>
    <p>some injected &lt;p&gt;</p>
    <p>some injected &lt;p&gt;</p>
    <p>some injected &lt;p&gt;</p>
</div>
<input id="input"/>
<button id="send" onclick="send()">SEND</button>

我的代码jquery

    <div>
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>

</table>

 <div class="form-group col-md-offset-5 ">
    <button id="hide" class="btn btn-success " type="submit">valider</button>
  </div>

</div>
<!------table2 ------>
<div>
   <table class="table table-bordered">
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
  </table>
</div>

Answer 1

您可以为div设置ID并使用$('#form1').hide()

要隐藏form2，可以使用CSS

#form2{
display:none;
}

点击验证事件

$("#hide").click(function(){
    $("#form1").hide();
     $("#form2").show();
  });

$(document).ready(function(){
  $("#hide").click(function(){
    $("#form1").hide();
     $("#form2").show();
  });
  
});

#form2{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>

</table>

 <div class="form-group col-md-offset-5 ">
    <button id="hide" class="btn btn-success " type="submit">valider</button>
  </div>

</div>
<!------table2 ------>
<div id='form2'>
   <table class="table table-bordered">
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
  </table>
</div>

我如何隐藏和显示表单使用jQuery

1 个答案: