如何使用一个删除按钮而不是每行一个删除按钮来删除特定行？

时间：2019-01-02 07:15:16

标签： javascript php jquery html css

希望一切都好，尽力而为。 我们可以通过在每一行中都有一个按钮来删除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    
}  
?>

enter image description here

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

请参考以下代码 您可以提及到row / 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>

答案 2 :(得分：-1)

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

如果您不想在每一行中都放置按钮，则可以使用复选框，如果checkbox的值获取该行或该帖子的ID，请收集所有选中的复选框并使用一个按钮将其删除，您可以使用阿贾克斯。

此处输入代码

**

  

注意：我使用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/');

        }
    }
相关问题
最新问题