jQuery获取最接近的td文本值

时间:2018-08-01 19:33:37

标签: javascript jquery html

亲爱的我有以下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());
}

请提供您的支持

3 个答案:

答案 0 :(得分:3)

我当然建议使用事件处理程序,而不要使用内联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>

答案 1 :(得分:1)

删除内联JavaScript,而是使用:

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

您没有传递对正在单击的元素的引用,因此该函数不知道this所引用的内容

答案 2 :(得分:1)

您还可以在函数内部获取事件(从JS自动传递),然后 然后获取事件的目标(点击的按钮)

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