搜索多行表时显示正确的值

Question

目前我正在使用这段 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 来显示：none，但是有很多不同的行，对于我可能遗漏的一些明显的东西来说，这似乎需要大量的手动工作。

感谢任何帮助。

编辑：此外，如果有人愿意的话 - 我也在试图弄清楚当有人搜索值时如何忽略标点符号。现在，如果值为“that's”并且有人搜索“thats”，它将找不到匹配项。

Answer 1

此更新后的代码将仅显示“找到”的列。我认为您可能想要添加 css 类而不是显示和隐藏。注释文本显示了如何添加和删除“highlight”类。

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');
                }
            });

        }
    });
}

jsFiddle

我不知道您将来是否有循环遍历行的目的，但是您的代码可以简化为：

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');
        }
    });
}

jsFiddle