0

各行にタグのリストが含まれるテーブルがあります。これらのタグを検索して、その特定のタグを含む行のみにテーブルを絞り込みたいと考えています。たとえば、検索ボックス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
4

1 に答える 1