dongmozhui3805
2016-10-15 11:38
浏览 39

如何隐藏多个表单并使用事件单击jquery显示表单之一

I'm using jquery to hide all when document ready and when I'm click one of the btn-primary then will be show and hide in accordance with for each of row.

jquery

<script>
$(document).ready(function() {
$('#table').DataTable();
$('#formmasuk').hide();
$('.btn-primary').click(function() {
$('#formmasuk').show();
$('#buttonmasuk').hide();
   });
});
</script?

html

<table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr style="center">
                    <th>Nik</th>
                    <th>Nama</th>
                    <th>Jabatan</th>
                    <th>Masuk</th>
                    <th>Keluar</th>
                  </tr>
                </thead>
                <tbody>
                  <?php  foreach($query as $row):?>
                <tr>
                    <td><?php echo $row->nik ?></td>
                    <td><?php echo $row->nama ?></td>
                    <td><?php echo $row->jabatan ?></td>
                    <td>
                      <div id='buttonmasuk'>
                          <a class="btn btn-sm btn-primary" href="javascript:void()"
  title="Masuk" onclick="masuk('<?php echo $row->id_kar;?>')">Masuk</a></div>
                      <div id='formmasuk'>
                          <form>
                          <input type="text" name="pass">
                          </form>
                      </div>
                          <td>
                          <a class="btn btn-sm btn-danger"  title="Keluar" ></i>
      Keluar</a></td>
                   </tr>
                    <?php 
                    endforeach ;?>
                </tbody>
              </table>

this image when document ready. why not all hidden? enter image description here when I click one of the button masuk (class btn-primary) then show enter image description here I want when clik click one of the button masuk (class btn-primary)then show and other still hidden

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dqeq885710 2016-10-15 11:48
    已采纳

    Change your ids to class.

    It should be like the following

    <div class='buttonmasuk'>
    ...
    <div class='formmasuk'>
    

    and the script be like the following

    $('.formmasuk').hide();
    $('.btn-primary').click(function() {
      $(this).closest('.formmasuk').show();
      $(this).closest('.buttonmasuk').hide();
    });
    
    打赏 评论
  • duanhe8280 2016-10-15 11:45

    Your html id-s should be unique for the page. Try to add unique id-s to the forms because now you are assingning them the same value "formmasuk"

    打赏 评论
  • dongxue9997 2016-10-15 11:58

    you need to first add Jquery library to your dom add this link in your index.html

             ["http://code.jquery.com/jquery-2.2.4.min.js"
              integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
              crossorigin="anonymous"]
    

    and remove the second line of the code datatable from your script then code is working fine and also please end your script tag properly.

    打赏 评论

相关推荐 更多相似问题