檢測使用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點擊的行

回答

相關問題