Question

我想知道如何做以下事情。我已经从tweets获得了Streaming API表。每个tr都有一个delete按钮。我的想法是，当我点击delete按钮时，会出现一个弹出框，提示用户是否要删除所选行。

我遇到的唯一问题是如何检测点击了哪个按钮，从而获得与tweet相关联的tr。

这是我的代码：

<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');
});

Answer 2

您可以使用closest查找最接近要删除的行按钮，然后按以下步骤删除：

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

Answer 3

您可以通过从“推文”中删除所需的“ID”来动态重新呈现表格。

这是我在项目中实现的示例代码。我希望它能给你解决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);
  }

检测使用JQuery单击的行

3 个答案: