在表中按ID選擇tr的子td

Question

我有一個表，通過該表，我想通過jQuery從按下按鈕的tr中選擇名字文本。

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更改為類並更改選擇應該起作用。 另外，只有一個ID2。我在按鈕上使用了data-id ，因此我仍然可以選擇值是什么，並且不重復id 。

注意：

data- “數據破折號”屬性是我在此處使用的屬性，用於更快地捕獲該屬性。 jQuery有一個.data()函數，專門用於查找這些類型的屬性。

。數據鏈接

Answer 2

看來您有幾個具有相同ID的元素。 在這種情況下，正確的用法是使用一個類：

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

然后，您的選擇器將變為： $("tr#"+id+" > td.firstname")