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

非空の入力を取得するには何の内蔵セレクタはありません。しかし、あなたはその要素からclosest()trを取得し、その後、値を持つ最後の入力を見つけるためにfilter()を使用することができます：あなたが最後の行の最後の入力の値が必要な場合

$('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>