各行にタグのリストが含まれるテーブルがあります。これらのタグを検索して、その特定のタグを含む行のみにテーブルを絞り込みたいと考えています。たとえば、検索ボックス2tag1 tagg
に入力すると、これらのタグを含む 2 行のみが表示されます。
私のテーブルは次のようになります。
私のテーブルの HTML は次のようになります。
<table class="table table-hover" id="tbl2">
<thead>
<tr>
<th class="span1">Merktu við spurningar</th>
<th class="span4"><strong>Spurning</strong></th>
<th class="span4"><strong>Vægi spurningar</strong></th>
<th class="span4">Tegund spurningar</th>
<th class="span2">Búin til</th>
<th class="span4">Tags</th>
</tr>
</thead>
<tbody id="tbl2body">
@for(question <- questions){
<tr id="row@question.spurningar_id">
<td><input type="checkbox" name="spurningar_id" id="@{question.spurningar_id}" onclick="enable(@question.spurningar_id)" value="@{question.spurningar_id}"></td>
<td>@{question.texti}</td>
<td><input type="number" min="0" max="100" value="0" size="6" name="vaegi" disabled="true" id="s@{question.spurningar_id}"></td>
<td><p>hehehe</p></td>
<td><strong>@{question.dagurbuidtil}</strong></td>
<td><ul id="tags"">
@for(tag <- question.tags){
<li class="well well-small">
@tag.leitarskilyrdi
</li>
}
</ul></td>
</tr>}
</tbody>
</table>
次のjqueryを試しましたが、これはもちろんタグだけでなく行全体を検索します。#tags li
の代わりにを選択すると#tbl2body tr
、タグを検索できますが、行は消えません。
どうすればこの問題を解決できますか?
$(document).ready(function() {
$('li strong').click(function(e) {
$(this).parent().find('em').slideToggle();
});
$('#search').on("input", function(e) {
var words = $(this).val().toLowerCase().match(/\S+/g);
if (!words) {
$('#tbl2body tr').show();
} else {
$('#tbl2body tr').each(function() {
var text = $(this).text().toLowerCase();
var show = words.some(function(word) {
return ~text.indexOf(word);
});
$(this).toggle(show);
});
}
});
}); // end document ready