Question

我有下表（由服务器生成）。我想获得点击行的输入元素值class="itemQuantity"。我编写了jQuery代码，但他错过了点击元素的“this”。

<script type="text/javascript">
$(document).ready(function() {
    $('.updateButton').click(function() {
        alert($('.itemQuantity').val());
    });
});
</script>

我如何使用jQuery（我想使用它而不是为每个元素创建id，但我对jQuery知之甚少）。

谢谢，约瑟夫

<table id="items">
<tr>
<th>item id</th>
<th>item name</th>
<th>item quantity</th>
<th>item update</th>
</tr>
<tr>

<td class="itemID">
1
</td>

<td class="itemName">
Ferari
</td>
<td >
<input class="itemQuantity" type="text" size="4" />
</td>
<td>
<button class="updateButton">update item</button>
</td>
</tr>
<tr>

<td class="itemID">
2
</td>

<td class="itemName">
Fiat
</td>
<td >
<input class="itemQuantity" type="text" size="4" />
</td>
<td>
<button class="updateButton">update item</button>
</td>
</tr>

<tr>

<td class="itemID">
3
</td>

<td class="itemName">
Hundai
</td>
<td >
<input class="itemQuantity" type="text" size="4" />
</td>
<td>
<button class="updateButton">update item</button>
</td>
</tr>    
</table>

Answer 1

$(document).ready(function() {
$('.updateButton').click(function() {
    alert($(this).closest('tr').find('.itemQuantity').val());
});
});

Answer 2

在jQuery事件处理程序中，“this”将引用作为事件源的DOM元素。因此，在click（）函数中，如果需要包装对象，可以使用this或$（this）。

Answer 3

如果您的HTML已修复，您也可以使用parent（）获得相同的结果：

<script type="text/javascript">
  $(document).ready(function() {
    $('.updateButton').click(function() {
      alert($(this).parent().parent().find('.itemQuantity').val());
    });
  });
</script>

jQuery：如何在表中选择单击的元素而不为每个元素定义唯一的id

3 个答案: