javascript - 如何使用一个删除按钮而不是每行中的删除按钮删除特定行？

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>