检测使用jQuery点击的行

我想知道如何执行以下操作。我有一张tweets从Streaming API被拉入。每个tr都有一个与之关联的delete按钮。这个想法是，当我点击delete按钮时，出现一个弹出框，提示用户他们是否希望删除所选的行。检测使用jQuery点击的行

我遇到的唯一问题是如何检测哪个按钮被点击并因此获得与该tr相关的tweet。

这是我的代码：

<div class="panel panel-default"> 
     <div class="panel-heading"> 
      All Tweets 
      <div class="pull-right btn-toolbar"> 
       <a href="#" class="btn btn-danger" id="delete_selected">Delete Selected</a> 
      </div> 
     </div> 
     <div class="panel-body"> 
      <table class="table table-hover" id="tweets_table"> 
       <thead> 
        <tr> 
         <th>Select</th> 
         <th>Tweet</th> 
         <th>Username</th> 
         <th>Name</th> 
         <th>Tweeted at</th> 
        </tr> 
       </thead> 
       @foreach(Tweet::orderBy('created_at', 'DESC')->get() as $tweet) 
        <tr id="{{$tweet->tweet_id}}"> 
         <td><a href="#myModal" data-toggle="modal" class="btn btn-danger" name="delete[]">Delete</a></td> 
         <td>{{$tweet->tweet_text}}</td> 
         <td>{{$tweet->screen_name}}</td> 
         <td>{{$tweet->name}}</td> 
         <td>{{$tweet->created_at}}</td> 
        </tr> 
       @endforeach 
      </table> 
     </div> 
    </div>

这是HTML的弹出：

<div class="modal" id="myModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title">Warning: Delete Tweet</h4> 
     </div> 
     <div class="modal-body"> 
      Are you sure you would like to delete this Tweet from the database? 
     </div> 
     <div class="modal-footer"> 
      <a href="#" data-dismiss="modal" class="btn">No</a> 
      <a href="#" class="btn btn-primary">Yes</a> 
     </div> 
     </div> 
    </div> 
</div>

这是JQuery

$('#openBtn').click(function(){ 

      $('#myModal').modal({show:true}) 

     });

目前，所有上面的代码做是当任何删除按钮被按下时显示模态。我希望能够显示与该模式中的删除按钮所在行相关的信息。任何帮助将非常感激。

来源

2014-09-10 Javacadabra

您可以使用closest函数查找单击元素的父行并将其保存在var中。稍后，您可以使用var来显示该行的信息。

var clicked_row; 
$('.btn-danger').click(function(){ 
    clicked_row = $(this).closest('tr'); 
});

来源

2014-09-10 11:27:28 Tzach

您可以使用closest找到最接近行删除按钮，如下删除：

$(".btn-danger").on('click', function(e) { 
    if (confirm('Are you sure to delete row?')) 
    { 
    $(this).closest('tr').remove(); 
    } 
    else 
    { 
    return false; 
    } 
});

来源

2014-09-10 11:31:30 Pawan

您可以动态地重新绘制表再次从“分享Tweet”删除所需要的“身份证” 。

这是我在我的项目中实现的示例代码。我希望它会给U想法解决Ur问题。

HTML代码设计

<div> 
     <table id="idCartDetailsTable"> 
      <tr></tr> 
     </table> 
    </div>

需要被调用（deleteCartItems）当删除按钮被点击

deleteCartItems: function(event){ 
     cartData.checkinCartData.pop(event.target.id); 
     this.renderCheckinCartItems(this.el);   
    }

需要通过使元件

的基准被称为在页面负载（renderCheckinCartItems）

renderCheckinCartItems: function (element) { 
     $(element).find('#idCartDetailsTable tr').html("");   
     var cartItems = "";  
     for (var i = 0; i < cartData.checkinCartData.length ; i++) { 
      cartItems += '<tr id="tr'+cartData.checkinCartData.id+'">'+ 
         '</tr>'; 
     } 
     $(element).find('#idCartDetailsTable tr').last().after(cartItems); 
    }

来源

2014-09-10 12:13:36 Pradeepta

检测使用jQuery点击的行

回答

相关问题