Question

我有一个表，通过jQuery，我想从按下按钮的tr中选择firstname的文本。

tr行看起来像：

....
<tr id = "2">
    <td>
        <input type="checkbox">
    </td>
    <td id = "firstname">
        John
    </td>
    <td id = "lastname">
         Doe
    </td>
    <td>
            <button id = "2" class="button">change</button>
    </td>
</tr>
....

上面的那个按钮链接到jQuery：

$(".button").click(function(){
    var element = $(this);
    var id = element.attr("id");
    var newusername = $("tr#"+id+" > td#firstname").html();
    alert(newusername);
});

为什么我的选择器不起作用？

Answer 1

由于ID必须是唯一的，请尝试...

<tr id = "2">
  <td>
    <input type="checkbox">
  </td>
  <td class = "firstname">
    John
  </td>
  <td class = "lastname">
     Doe
  </td>
  <td>
     <button data-id = "2" class="button">change</button>
  </td>
</tr>

......和......

$(".button").click(function(){
  var element = $(this);
  var id = element.data("id");
  var newusername = $("#" + id + " > .firstname").html();
  alert(newusername);
});

将名称ID更改为类并更改选择应该有效。此外，只有一个ID为2.我在按钮上使用了data-id，这样我仍然可以选择值是什么，并且没有复制id。

注意：

data-＆＃34;数据短划线＆＃34;属性是我在这里用来更快地捕获属性的属性; jQuery有一个.data()函数，专门查找这些类型的属性。

<强> .data() link

Answer 2

您似乎有几个具有相同ID的元素。在这种情况下，正确的用法是使用类：

<td class="firstname">
...
<td class = "lastname">

然后您的选择器变为：$("tr#"+id+" > td.firstname")

在表格中选择id by tr的子td

2 个答案: