[英]JQuery get closest td text value
亲爱的我有以下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());
}
您的支持,请
我当然建议使用事件处理程序,而不要使用内联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>
删除您的内联JavaScript,而是使用:
$('td.text-center button').click(function(){
alert( $(this).closest('tr').find('.cardSerialNumber').val() );
})
您没有传递对正在单击的元素的引用,因此该函数不知道this
指的是什么
您还可以在函数内部获取事件(从JS自动传递),然后获取事件的目标(单击的按钮)
function validateCardBeforeAssigning(ev) {
var target = ev.target;
alert($(target).closest('tr').find('.cardSerialNumber').val());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.