通过tr data-id获取td的第一个内容

Question

我有以下 HTML 代码：

<tr data-id='23'>
   <td><a href='../index.php?typeID=23'>Title</a></td>
   <td><a href='updateArticleType.php?typeID=23'>Update</a></td>
   <td><a href='#' data-toggle='modal' data-target='#myModal' class='warning-dialog' data-id='23'>Delete</a></td>
</tr> 

以及以下 JQuery 代码：

$(function () {
    var lastClickId;
    $('.warning-dialog').click(function () {
        lastClickId = $(this).data("id");
        var str = $("tr[data-id='" + lastClickId + "']:first").text();
        alert(str);
    });

我需要获取namearchos 标签之间的内容。

我尝试了上面的代码，但警报中是 get "Name Update Delete"。

我的问题是为什么它不起作用以及如何修复它？

Answer 1

您正在寻找第一个tr而不是第一个td。

你的选择器希望更像这样：

 $("tr[data-id='" + lastClickId + "']>td:first")

td我不建议根据选择器中 s for的顺序。有一天，您可能决定在标题列之前添加一新列。那就是你的代码崩溃的那一天。

考虑标题上的类名并在选择器中使用它，如下所示：

<tr class="data-item" data-id='23'>
   ...
   <td class="item-title">...</td>
   ...
</tr> 

JS：

 $(".data-item[data-id='" + id + "'].item-title:first")