我有一个表,表顶部有一个复选框,用于选择所有复选框,每行有单独的复选框供用户选择。目前,PHP的工作原理是,在选择了每一行并按下删除(提交)按钮后,它会相应地更新DB。用户刷新页面后才能看到此行已被删除。我想使用一些jQuery来隐藏用户在点击提交按钮后选择的任何表行。
我试过使用的变体
$('#delete_message').closest('tr').hide();
但我似乎无法让它正常工作。HTML是直接的
<form name="bulk_action_form" action="' . $_SERVER['REQUEST_URI'] . '" method="post" onSubmit="return delete_confirm();"/>
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-1"><input type="checkbox" name="select_all" id="select_all" value=""></th>
<th class="col-md-3">From</th>
<th class="col-md-4">Subject</th>
<th class="col-md-4">Date</th>
</tr>
</thead>
<tbody class="checkbox-group" data-toggle="toggle-checkbox">
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 1</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 1</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 2</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 2</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 3</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 3</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
</tbody>
</table>
<input type="submit" class="btn btn-danger" name="bulk_delete_submit" id="delete_message" value="Delete">
</form>
如何确保它隐藏选定的任何表行,如果全部选定,如何隐藏全部。
非常感谢您的帮助!
感谢
编辑:我正在使用的PHP在表单提交后更新数据库
include_once('dbConfig.php');
if(isset($_POST['bulk_delete_submit'])){
$idArr = $_POST['checked_id'];
foreach($idArr as $id){
mysqli_query($conn,"UPDATE message SET publish='n' WHERE id=".$id);
}
}
我希望我能正确理解。
所以您想隐藏选中的行,点击按钮?以下是您的操作方法JSFiddle:
//this is how you can select all rows
$('#select_all').on('click', function(){
if(this.checked == true)
{
$('.table tbody .checkbox').each(function(){
this.checked = true;
});
}
else{
$('.table tbody .checkbox').each(function(){
this.checked = false;
});
}
});
$('#delete_message').on('click', function(){
$('.table tbody').find('input:checkbox:checked').closest('tr').hide();
})
但是,如果您希望这些行在刷新后被隐藏,您应该为行创建ID,然后在PHP代码中处理它们。所以,当你们重新加载页面时,你们会得到那个些值,并隐藏那个些ID的行(或者你们使用的任何东西)。
假设你有一个表单,那么先阻止,然后默认,然后提交。
$('#delete_message').click(function(e)
e.preventDefault();
$('.checkbox:checked').closest('tr').hide();
$(this).closest('form').submit();
});
但是,如果您使用Ajax,请将其放入成功函数中。
您的jQuery需要找到.checkbox-group
中所有检查的输入,然后找到最接近的tr
来隐藏它
$("#delete_message").click(function(){
$(".checkbox-group input:checked").closest("tr").hide();
});
对于全选/取消全选,您需要再次在.checkbox-group
中查找all复选框控件,并使用#select_all
复选框的选中值更新它们。
$("#select_all").click(function(){
$(".checkbox-group input:checkbox").prop("checked", this.checked);
});
要通过ajax提交表单而不刷新页面(并使行弹出),您需要将id
应用于bulk_action_form
的form
,然后使用以下jQuery:
$("#bulk_action_form").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response) {
// Consider doing something here (like a saved message).
console.log(response);
}
});
});
在这里工作jsfiddle:http://jsfiddle.net/9qmxfc0n/4/
如果您仍然收到返回的行,那么您的PHP脚本有问题。