javascript - 通过表中的 id 选择 tr 的子 td

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-“data dash”属性是我在这里使用的一个属性，以便更快地捕获该属性； jQuery 有一个 .data() 函数专门查找这些类型的属性。

.data() link