0

現在、この Javascript を使用して HTML テーブルを検索し、特定のセル内のデータに一致するものを探しています。

function searchTable(inputVal) {
    var table = $('#tblData');
    table.find('tr').each(function(index, row) {
        var allCells = $(row).find('td');
        if(allCells.length > 0) {
            var found = false;
            allCells.each(function(index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if(regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });
            if(found == true){
                $(row).show("highlight");
            }
            else {
                $(row).hide("highlight");
            }
        }
    });
}

テーブルは次の構造でセットアップされます。

<tr>
<td>value1</td>
<td>value2</td>
</tr>

そのため、value1 を検索すると、value2 を含む行全体が表示されます。

value2 を表示しないようにする方法がわかりません。それぞれに異なるIDを割り当ててから、javascriptを使用してdisplay:noneを試みていましたが、多くの異なる行があり、行方不明の可能性のある明らかなもののために多くの手作業のようです。

どんな助けでも大歓迎です。

編集:さらに、誰かがそれに賛成している場合-誰かが値を検索するときに句読点を無視する方法も見つけようとしています。現在、値が「that's」で、誰かが「that's」を検索しても、一致するものは見つかりません。

4

1 に答える 1

0

この更新されたコードは、「見つかった」列のみを表示します。表示と非表示の代わりに css クラスを追加したいと思うかもしれません。コメント付きのテキストは、「ハイライト」クラスを追加および削除する方法を示しています。

function searchTable(inputVal) {
    var table = $('#tblData');
    table.find('tr').each(function (index, row) {
        var allCells = $(row).find('td');
        if (allCells.length > 0) {
            var found = false;
            allCells.each(function (index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if (regExp.test($(td).text())) {
                    $(this).show();
                    //$(this).addClass('highlight');
                } else {
                    $(this).hide();
                    //$(this).removeClass('highlight');
                }
            });

        }
    });
}

jsフィドル

行をループする将来の目的があるかどうかはわかりませんが、コードは次のように簡略化できます。

function searchTable(inputVal) {
    $('#tblData tr td').each(function (index, td) {
        var regExp = new RegExp(inputVal, 'i');
        if (regExp.test($(td).text())) {
            //$(this).show();
            $(this).addClass('highlight');
        } else {
            //$(this).hide();
            $(this).removeClass('highlight');
        }
    });
}

jsフィドル

于 2013-07-20T05:20:46.743 に答える