javascript - 使用 JQuery 检测被单击的行

Question

我想知道如何执行以下操作。我有一张从 Streaming API 中提取的 tweets 表格。每个tr 都有一个与其关联的delete 按钮。这个想法是，当我单击“删除”按钮时，会出现一个弹出框，提示用户是否希望删除所选行。

我遇到的唯一问题是如何检测单击了哪个按钮，从而获取与该 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})

        });

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

Answer 1

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

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