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

I have a table with a checkbox at the top to select all, and individual checkboxes on each row for the user to select. Currently the PHP works so that after each row has been selected and the delete(submit) button is pressed, it updates the DB accordingly. How ever the user can only see that this row has been deleted once they refresh the page. I would like to use some jQuery to hide whatever table row the user has selected, after they hit the submit button.

我有一个表格,顶部有一个复选框,可以选择所有,每行都有各个复选框供用户选择。目前PHP的工作原理是,在选择每一行并按下删除(提交)按钮后,它会相应地更新DB。用户如何只能在刷新页面后才能看到该行已被删除。我想使用一些jQuery隐藏用户选择的任何表行,在他们点击提交按钮后。

I've tried using variations of

我尝试过使用各种变体

$('#delete_message').closest('tr').hide();

But I can't seem to get that to work properly. The HTML is straight forward

但我似乎无法让它正常工作。 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>

How can I make sure that it hides whatever table row is selected, and if all are selected how can I hide all of them.

如何确保它隐藏了所选的任何表行,如果选择了所有表,我怎么能隐藏所有表行。

You help is greatly appreciated!

非常感谢您的帮助!

Thanks

Edit: The PHP I am using to update the DB after the form submit

编辑:我在表单提交后用于更新数据库的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);
  }
}

3 个解决方案

#1

I hope I understand correctly.

我希望我理解正确。

So you want to hide rows which are checked, on button click? Here's how you can do it JSFiddle:

所以你想在按钮点击时隐藏被检查的行?这是你如何做到这一点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();
})

But if you want these rows to be hidden after refresh, you should create IDs for rows, then handle them in your PHP code. So, when you reload page, you would get those values, and hide rows with those IDs (or whatever you use).

但是如果你想在刷新后隐藏这些行,你应该为行创建ID,然后在PHP代码中处理它们。因此,当您重新加载页面时,您将获得这些值,并使用这些ID(或您使用的任何内容)隐藏行。

#2

Assuming you have a form then prevent then default and submit after.

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

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

If your using Ajax however put this in your success function.

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

#3

Your jQuery needs to find all the checked inputs inside the .checkbox-group and then find the closest tr to hide it. Like here:

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

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

For your select all/deselect all, you need to again look in the .checkbox-group and find all the checkbox controls and update them with the checked value of the #select_all checkbox.

对于select all / deselect all,您需要再次查看.checkbox-group并找到所有复选框控件,并使用#select_all复选框的选中值更新它们。

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

To submit your form via ajax without refreshing the page (and having the rows pop back) you need to apply an id to your form of bulk_action_form and then utilize the following jQuery:

要通过ajax提交表单而不刷新页面(并弹出行),您需要将id应用于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);
      }
   });
});

Working jsfiddle here: http://jsfiddle.net/9qmxfc0n/4/

在这里工作jsfiddle:http://jsfiddle.net/9qmxfc0n/4/

If you still receive the rows coming back then you have an issue with your PHP script.

如果您仍然收到回来的行,那么您的PHP脚本就会出现问题。

#1