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


How can I hide the table row after its checkbox has been selected and the user hits submit

我有一个表,表顶部有一个复选框,用于选择所有复选框,每行有单独的复选框供用户选择。目前,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_formform,然后使用以下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脚本有问题。