JQuery获取最接近的td文本值

Question

亲爱的，我有下面的html

<tbody>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" onclick="validateCardBeforeAssigning();" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check"></span></button>
</td>
</tr>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" onclick="validateCardBeforeAssigning();" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check"></span></button>
</td>
</tr>
</tbody>

因此，在点击btn后，我想从带有壁橱td 的同一tr中获得文本(class cardSerialNumber(值

我尝试了以下功能，但始终未定义

function validateCardBeforeAssigning() {
alert($(this).closest('tr').find('.cardSerialNumber').val());
}

请支持

Answer 1

我当然建议使用事件处理程序，而不是内联onclick。给你的按钮一个独特的类，并应用以下jQuery:

<button type="button" class="btn btn-success assign-card">

$(".assign-card").on("click", function() {
alert($(this).closest('tr').find('.cardSerialNumber').val());
});

演示：

$(".assign-card").on("click", function() {
alert($(this).closest('tr').find('.cardSerialNumber').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
</td>
</tr>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
</td>
</tr>
</tbody>
</table>

---

如果你想简单地修复你的代码，我不建议你这样做，你可以做以下事情：

<button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success">

function validateCardBeforeAssigning(btn) {
alert($(btn).closest('tr').find('.cardSerialNumber').val());
}

通过将函数更改为传递this，可以获得对按钮的引用，而this的使用并没有引用任何元素。

演示：

function validateCardBeforeAssigning(btn) {
alert($(btn).closest('tr').find('.cardSerialNumber').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
</td>
</tr>
<tr>
<td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>
<td class="text-center"><button type="button" onclick="validateCardBeforeAssigning(this);" class="btn btn-success"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
</td>
</tr>
</tbody>
</table>

Answer 2

删除内联JavaScript，改为使用：

$('td.text-center button').click(function(){
alert( $(this).closest('tr').find('.cardSerialNumber').val() );
})

您没有传递对您正在点击的元素的引用，因此函数不知道this指的是

Answer 3

您还可以在函数中获取事件(从JS自动传递(，并且然后获取事件的目标(您点击的按钮(

function validateCardBeforeAssigning(ev) {
var target = ev.target;
alert($(target).closest('tr').find('.cardSerialNumber').val());
}