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

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>

我需要找出 table 中的最后一行这些文本框是否有价值。除了循环遍历它们，有没有我可以利用的快速 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>

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

How to use jQuery selector to find last row in table that textboxes have values?

jquery

selector