2

テキストボックスにonkeyupで以下のSearchが呼ばれるとします。
Searchの中で目的のテーブルを捕まえています。
このキーワードにヒットする行のみ表示で、他の行を非表示にするコードを教えてください。

    function Search($this) {

        var keyword = $this.value;

        var rows = $("#TABLE1").rows;
        $.each(rows, function (i) {
            var cells = rows[i].cells;
        });
    }

1 件の回答 1

1

jQuery的に書くならrows, cellsよりセレクタにeachだと思います。
キーワード一致は正規表現を使っています。このあたりは良しなに。

$(document).ready(function(){
    
    $('input').on('keyup', function(){
        Search($(this).val());
    });
    
});

function Search(keyword) {
    
    var regExp = new RegExp(keyword);
    
    $('#TABLE1').find('tr').hide().each(function(){
        var tr = $(this);
        $(this).find('td').each(function(){
            if ($(this).text().match(regExp)) {
                tr.show();
            }
        })
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<table id="TABLE1"><tbody>
    <tr><td>a1</td><td>zzb1zz</td><td>c1</td></tr>
    <tr><td>a2</td><td>zzb2zz</td><td>c2</td></tr>
    <tr><td>a3</td><td>zzb3zz</td><td>c3</td></tr>
</tbody></table>

<input type="text" value="" />

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。