Question

我有一个包含多行的表，每行包含一个删除按钮。现在，如果我们点击删除按钮，则会从表中删除/隐藏相应的行。

我想实现警告“你想删除吗？” 如果答案是肯定的。然后只隐藏了行.. 我们如何才能实现它..

 <table>
 <tr class="alert alert-dismissable" >		         
     <td>	     
     Item 1                
     </td>
     <td>	   
     <button  data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>                 
     </td>
 </tr>
 </table>

Answer 1

通过使用javascript（在HTML - ＆gt; onclick="ConfirmDelete()"中添加属性并在JS中定义），可以执行以下操作：

<强> HTML：

<button  data-dismiss="alert" onclick="ConfirmDelete()" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>

<强> JS：

function ConfirmDelete() {
var result = confirm("Are you sure to delete?");

if (result) {
  //User confirms to delete it
} else {
  //User doesn't confirms to delete it
}

}

Answer 2

你必须使用javascript进行DOM操作。

check the code here

请勿使用data-dismiss api隐藏行。它立即隐藏行并且不必担心点击事件监听器中的条件和逻辑。

Answer 3

通过Jquery你可以做到这一点 -

你的Html -

<table>
 <tr class="alert alert-dismissable" >               
 <td>        
 Item 1                
 </td>
 <td>      
 <button  data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" onclick="ConfirmDelete(this)">Delete</button>                 
 </td>
</tr>
</table>

在JS中

function ConfirmDelete(control) {
        var Confirm = confirm("Want to delete?"); 
        if (Confirm) {
          $(control).parent().parent().css("display","none")
        } else {
          //User doesn't confirms to delete it
        } 
    }

Answer 4

尝试使用以下代码，它可以帮助您

$(function(){
      $('table').on('click','tr a',function(e){
         e.preventDefault();
         var result = confirm("Are you sure to delete?");
         if (result) {
         $(this).parents('tr').remove();} else { alert('You Canceled');}

      });
 });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<table class="table">
<tr>
  <td class="active">Item 1</td>
  <td><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td>
</tr>
  <tr>
  <td class="success">Item 2</td>
  <td><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td>
</tr>
  <tr>
  <td class="info">Item 3</td>
  <td><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td>
</tr>
</table>

我们如何防止隐藏行

4 个答案: