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')，以便检索所点击元素的正确属性，而不是第一个匹配元素。

您还尝试选择table元素作为#cards元素的后代。 table元素的id为#cards，因此选择器应为$("table#cards ...")。或者从选择器中省略table。

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

Working Example

$(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放在模态的数据属性上。它消除了将其存储在其他地方的变量中的需要。同样，清理它需要深入了解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.

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

4 个答案:

使用帮助程序库

使用Vanilla Bootstrap / jQuery