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

目前，我正在使用这段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>

价值1
价值2

因此，当搜索value1时，整行显示-包括value2

我不知道如何使value2不显示。我试着为每一行分配一个不同的id，然后使用javascript来显示：无，但是有很多不同的行，似乎有很多手动工作要做，很明显我可能会遗漏一些东西

感谢您的帮助

---

编辑：此外，如果有人想这样做，我还试图找出在有人搜索值时如何忽略标点符号。现在，如果值为“that's”，而有人搜索“that”，则不会找到匹配项。

此更新的代码将只显示“find”的列。我认为您可能希望添加css类，而不是显示和隐藏。注释文本显示了如何添加和删除“highlight”类

我不知道在行中循环是否有未来的用途，但您的代码可以简化为：

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

---

您应该在内部循环的TD上调用

show

和

hide

。找到匹配项时不要返回

false

，因为这样会终止循环。这太棒了-非常感谢！您还知道如何忽略搜索输入的大小写和标点符号吗？您可以使用

字符串删除标点符号。替换（/[^\w\d\s]/g'，）

这样您就可以新建

regExp=regExp（inputVal.replace（/[^\w\d\s]/g'）

和

$（td.text（）.replace（/[^\w\d\s]/g'）

。

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