如何删除每行中有一个删除按钮而不是删除按钮的特定行？

Question

希望一切都好，做得最好。 我们可以通过在每一行中都有一个按钮来删除PHP中的特定行，所以如果我们在每一行中都没有删除按钮，只需要一个删除按钮来删除特定行，我们就可以这样做。 有关更多信息，请检查上传的图像。

<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" 
 aria-labelledby="modalDelete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold ml-5 text- 
danger">Delete</h4>
<button type="button" class="close text-danger" data-dismiss="modal" 
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
<p class="text-center h4">Are you sure to delete selected record?</p>
</div>
<div class="modal-footer d-flex justify-content-center 
deleteButtonsWrapper">
<button type="submit" name="btnDeleteRec" class="btn btn-danger 
btnYesClass" id="btnYes">Yes</button>
<button type="submit" class="btn btn-primary btnNoClass" id="btnNo" data- 
dismiss="modal">No</button>
</div></div></div></div>

<table id="dtBasicExample" class="table table-striped table-bordered" 
cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm" style="width:20px; text-align:center;">ID</th>
<th class="th-sm" style="width:150px; text-align:center;">Name</th>
<th class="th-sm" style="width:150px; text-align:center;">Position</th>
<th class="th-sm" style="width:200px; text-align:center;">Image</th>
<th class="th-sm" style="text-align:center;" ><i style="margin- 
right:10px;" class="fa fa-facebook" aria-hidden="true"></i>Facebook</th>
<th class="th-sm" style="text-align:center;"><i style="margin- 
right:10px;" class="fab fa-twitter"></i>Twitter</th>
<th class="th-sm" style="text-align:center;"><i style="margin- 
right:10px;" class="fa fa-google-plus" aria-hidden="true"></i>Google Plus
</th></tr></thead>
<tbody>
<?php
while($datarecord=mysqli_fetch_assoc($resultrecord))
{
?>
<tr>
<td style="text-align:center;"><?php echo $datarecord["id"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["name"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["position"]; ?> 
</td>
<td style="text-align:center;">
<?php 
echo '<img src="images/'.$datarecord['image'].'" style="height:60px; 
width:65px;">';
?>
</td>
<td style="text-align:center;"><?php echo $datarecord["facebook"]; ?> 
</td>
<td style="text-align:center;"><?php echo $datarecord["twitter"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["googleplus"]; ?> 
</td>
</tr>
<?php    
}  
?>

Answer 1

你可以使用jquery看到下面的内容，非常简单......

 $('tr').click(function(){ $(this).siblings().removeClass('selected'); $(this).addClass('selected'); $('.delete-row').removeAttr('disabled'); }); $('.delete-row').click(function(){ $('tr.selected').remove(); $('.delete-row').attr('disabled','disabled'); }); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } .delete-row { background-color:red; border-radius:4px; color:#FFF; display: block; margin: auto; margin-top: 30px; padding: 10px 20px; } .selected { outline : red solid 1px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>HTML Table</h2> <table id="tab"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button class="delete-row" disabled> Delete </button> 

Answer 2

请参考下面的代码你可以提到的是行/ tr。 访问tr属性id并添加到数组中。 单击按钮时，将删除所有选定的行。

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.delete-row {
    background-color:red;
    border-radius:4px;
    color:#FFF;
    display: block;
    margin: auto;
    margin-top: 30px;
    padding: 10px 20px;
}

.selected {
    outline : red solid 1px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>HTML Table</h2>

    <table id="tab">
      <tr id="1">
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr id="2">
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr id="3">
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr id="4">
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr id="5">
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr id="6">
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr id="7">
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
<button class="delete-row" disabled>
        Delete
    </button>
<script>
data = [];
$('tr').click(function(){
  //$(this).siblings().removeClass('selected');
  //$(this).addClass('selected');
  var elID = $(this).attr('id');  
  $("#" + elID).addClass('selected');
  data.push(elID);
  $('.delete-row').removeAttr('disabled');
});

$('.delete-row').click(function(){  
    console.log(data);
    for (var d=0; d<data.length; d++){              
        $("#" + data[d]).remove();      
    }
    data = [];
});
</script>

Answer 3

我想你必须以任何你想要删除的方式获取行的ID。

如果您不想在每行中放置按钮，您可以使用复选框，并且对于复选框的值获取行或该帖子的ID，收集所有选中的复选框并使用一个按钮将其删除，您可以使用ajax。

这是代码

**

注意：我使用php，oop和mvc并使用ajax删除。

** ========== HTML ===========

   <button onclick="delete_post();" class="delete_btn_selected ">
            delete
        </button>

    <table id="tablePublicNotif" >
        <thead>
        <tr>
            <th>delete</th>
            <th>
              <div class="delete_btn_check" >
                  <input type="checkbox"  class=" delete_btn_check" id="select-all-checkbox-public-notif" name="checked"  />
              </div>

            </th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td >
                        <input type="checkbox"  class=" delete_btn_check "  name="checked"   value="<?php echo $post->id ?>" />
                </td>
            </tr>

        </tbody>
    </table>

========== JAVASCRIPT ===========

$("#select-all-checkbox-public-notif").click(function () {
        $('#tablePublicNotif input:checkbox').not(this).prop('checked', this.checked);
    });

  var path_array = pathname.split("/");

        var delete_post  = function() {
            var categories = $(".delete_btn_check:checked").map(function () {
                return this.value
            }).get();

            $.ajax(path_array['0']+'/'+path_array['1']+'/'+path_array['2']+'/'+path_array['3']+ '/notifications/delete', {
                type : 'post',
                data: {
                    delete_arr_id: categories
                } ,
                success : function (data) {
                    var pathname = document.URL;
                    var path_array = pathname.split("/");
                    window.location =path_array['0']+'/'+path_array['1']+'/'+path_array['2']+'/'+path_array['3']+'/'+path_array['4']+'/notifications';
                }
            });
        };

========== PHP ===========

  public function delete(){
        if($_SERVER['REQUEST_METHOD'] == 'POST'){
            // this foreach loop throw array of ids
            foreach ($_POST['delete_arr_id'] as $id){
              // check if post exists
                $post = $this->NotifModel->getPostById($$id);
                // Check for owner
                if($post->user_id != $_SESSION['user_id']){
                    redirect('notifications/');
                }

                if(!empty($post)){
                  //if found post then delete
                    if($this->NotifModel->deletePost($id)){

                    } else {
                        die();
                    }
                }else{
                    redirect('notifications/');

                }
            }

        } else {
            redirect('notifications/');

        }
    }