如何使用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>