如何使用jQuery选择器查找表中文本框具有值的最后一行？

Question

假设我有以下HTML

<tr>
    <td>
        <input type="text" class="date-input" />
        <input type="text" class="date-input" />
        <input type="text" class="number-input" />
        <input type="text" class="number-input" />
    </td>
</tr>
<tr>
    <td>
        <input type="text" class="date-input" />
        <input type="text" class="date-input" />
        <input type="text" class="number-input" />
        <input type="text" class="number-input" />
    </td>
</tr>
<tr>
    <td>
        <input type="text" class="date-input" />
        <input type="text" class="date-input" />
        <input type="text" class="number-input" />
        <input type="text" class="number-input" />
    </td>
</tr>

我需要找出表格中的最后一行，这些文本框中的任何一个都有价值。而不是循环遍历它们，是否有一个我可以利用的快速jQuery选择器？

Answer 1

没有内置选择器来获取非空输入。但是，您可以使用filter()查找带有值的最后一个输入，然后从该元素中获取closest() tr：

$('button').click(function() {
  $('.foo').removeClass('foo'); // only for this demo, you may not need this

  var $tr = $('input').filter(function() {
    return this.value.trim();
  }).last().closest('tr');

  $tr.addClass('foo');
});

.foo { background-color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" />
    </td>
  </tr>
</table>

<button>Highlight row</button>

Answer 2

如果您想要最后一行的最后一个输入的值，可以使用$("table tr:last input:last")。

$(document).ready(function() {
  console.log($("table tr:last input:last").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" class="date-input" />
      <input type="text" class="date-input" />
      <input type="text" class="number-input" />
      <input type="text" class="number-input" value="last" />
    </td>
  </tr>
</table>