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());
}