如何获得 <tr> 基于子元素的data- *属性？

Question

我已经可以获取数据的ID了，但是问题在于如何在html上找到该数据

这是我的HTML

<table cellspacing="0" cellpadding="0" border="0" id="cards" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Description</th>
            <th>By</th>
            <th>Total Votes</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>If the opening scene of this show scared you as a kid, DRINK!</td>
            <td>testing testing</td>
            <td>1</td>
            <td>
                <a data-id="1" data-target="#viewCard" data-toggle="modal" class="btn btn-default btn-xs view" href="#"><span class="fa fa-eye"></span> View Card</a>
                <a data-id="1" data-target="#editCard" data-toggle="modal" class="btn btn-primary btn-xs edit" href="#"><span class="fa fa-edit"></span> Edit</a>
                <a data-id="1" data-target="#deleteCard" data-toggle="modal" class="btn btn-danger btn-xs delete" href="#"><span class="fa fa-remove"></span> Delete</a>
            </td>
        </tr>
        ...
    </tbody>
</table>

所以当弹出...时，它将显示按钮，这是.submitDelete

<a href="#" data-id="" class="btn btn-danger btn-xs submitDelete">Delete</a>

和js

 $(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        var card_id     = $(".submitDelete").data('card_id');
        var test = $("#cards table tr .delete[data-id='"+card_id+"']"); //<---- idk how to get the tr to be remove... this is what I've tried so far.
        console.log(test);
});

EDIT1我添加了jsfiddle，所以你们知道流程

http://jsfiddle.net/sdxaV/1/

EDIT2 http://jsfiddle.net/sdxaV/12/

Answer 1

根据您提供的HTML， .submitDelete元素没有card_id属性。

因此，将$(".submitDelete").data('card_id')更改$(this).attr('data-id') ，以获取clicked元素（而不是第一个匹配元素$(this).attr('data-id')的正确属性。

您还试图选择一个table元素，该table元素是#cards元素的后代。 table元素的id为#cards ，因此选择器应为$("table#cards ...") 。 或从选择器中省略table 。

然后要获取最接近的tr元素，请链接.closest('tr') ：

工作实例

$(document).on('click', '.submitDelete', function(e) {
  e.preventDefault();

  var card_id = $(this).attr('data-card_id');
  var $row = $("table#cards tr .delete[data-id='" + card_id + "']").closest('tr');

  $row.remove();
});

Answer 2

我总是将jQuery.closest（）用于此类事情。 它将向上浏览祖先，直到匹配为止。

 $(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        var test = $(this).closest('tr');
        console.log(test);
});

在这种情况下， this是单击的.submitDelete按钮。

Answer 3

带有帮助库

执行此操作最简单的方法是，不使用自己的方法来执行此操作，而是引入一个已经包装了Bootstrap模态（如Bootbox）的库 。 您示例的删除链接将更改为以下内容：

<a data-id="1" class="btn btn-danger btn-xs delete" href="#"><span class="fa fa-remove"></span> Delete</a>

您的Javascript将更新为以下内容：

$(document).on('click', '.delete', function(e){
        e.preventDefault();

        var $row = $(this).closest('tr');
        bootbox.confirm("Are you sure?", function(result) {
             $row.remove();
        }); 
});

请注意，我们不再使用Bootstrap的HTML属性来加载模式。 Bootbox正在为我们创建模式。

使用Vanilla Bootstrap / jQuery

要使用直接的Bootstrap做到这一点，我将不再使用Bootstrap HTML属性直接加载模式。 类似以下内容将起作用。 请注意，它不是很干净，但是可以很容易地清理它，具体取决于您的JavaScript设置方式。

var $row = null;
$(document).on('click', '.delete', function(e){
        e.preventDefault();

        $row = $(this).closest('tr');

        $('#deleteCard').modal();
});

$(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        if($row != null) { $row.remove(); $row = null; }
});

一种清理方法是将卡ID放在模式的data属性上。 它消除了将其存储在其他地方的变量中的需要。 同样，清理此漏洞需要深入了解JavaScript的外观。 祝好运。

Answer 4

这是您的锚元素<a> ：

var test = $("#cards table tr .delete[data-id='"+card_id+"']");

虽然可以缩短。 因为this将引用传递给on()方法的函数内部单击的锚点。 为了让一个jQuery对象，你就需要通过this来$ ， $( this ); 。

现在，您需要遍历DOM到表行<tr> 。 jQuery提供了一种称为closest()的方法来执行此操作。

var link = $( this );
var tr = link.closest( 'tr' );
// Do what you need to with variable tr.