Блог

Я использую jquery, чтобы скрыть все, когда документ готов, и когда я нажимаю на один из btn-primary, тогда будет отображаться и скрываться в соответствии с для каждой строки.

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>
 

это изображение, когда документ готов.
почему не все скрыто?

когда я нажимаю одну из кнопок masuk (класс btn-primary), то показываю

Я хочу, чтобы при щелчке мыши нажималась одна из кнопок masuk (класс btn-primary), а затем показывалась, а другие все еще были скрыты

Измените свой ids на class .

Это должно быть похоже на следующее

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

и сценарий будет выглядеть следующим образом

 $('.formmasuk').hide();
$('.btn-primary').click(function() {
  $(this).closest('.formmasuk').show();
  $(this).closest('.buttonmasuk').hide();
});
 

Ваши html-идентификаторы должны быть уникальными для страницы. Попробуйте добавить уникальные идентификаторы к формам, потому что теперь вы присваиваете им одно и то же значение «formmasuk»

сначала вам нужно добавить библиотеку Jquery в свой dom. добавьте эту ссылку в свой index.html

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

и удалите вторую строку кода, подлежащего обработке данными
, из вашего скрипта, тогда код работает нормально, а также, пожалуйста, правильно завершите свой тег скрипта.