[英]how to hide multiple form and show one of form with event click jquery
當文檔准備就緒時,我使用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 id應該是該頁面的唯一。 嘗試向表單添加唯一的id,因為現在您要賦予它們相同的值“ formmasuk”
您需要先將Jquery庫添加到您的dom中,然后在index.html中添加此鏈接
["http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"]
並從腳本中刪除代碼數據表的第二行,那么代碼工作正常,還請正確結束腳本標記。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.