Question

我有一个表格，顶部有一个复选框，可以选择所有选项，每行都有各个复选框供用户选择。目前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);
  }
}

Answer 1

我希望我理解正确。

所以你想在按钮点击时隐藏被检查的行？这是你如何做到的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（或您使用的任何内容）隐藏行。

Answer 2

您的jQuery需要在.checkbox-group中找到所有已检查的输入，然后找到最接近的tr来隐藏它。像这里：

$("#delete_message").click(function(){
    $(".checkbox-group input:checked").closest("tr").hide();
});

对于全部选择/取消全选，您需要再次查看.checkbox-group并找到所有复选框控件，并使用#select_all的选中值更新它们复选框。

$("#select_all").click(function(){
    $(".checkbox-group input:checkbox").prop("checked", this.checked);
});

要通过ajax提交表单而不刷新页面（并弹回行），您需要将id应用于form bulk_action_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脚本就会出现问题。

Answer 3

假设您有一个表单然后阻止然后默认并在之后提交。

 $('#delete_message').click(function(e)
         e.preventDefault();
         $('.checkbox:checked').closest('tr').hide();          
         $(this).closest('form').submit();
    });

如果你使用Ajax，那么就把它放在你的成功函数中。

如何在选中复选框并且用户点击提交后隐藏表格行

3 个答案: