如何在javascript中突出显示searchtext记录？答案

【问题标题】：How to highlight searchtext records in javascript?如何在javascript中突出显示searchtext记录？
【发布时间】：2013-12-23 14:43:40
【问题描述】：

姓名角色

applicationame          role                     id
application1           appadministrator      1490
application            developer             1498
application2            tester               1460

我需要像输入'app'一样的结果，因为searchtext需要突出显示所有行，因为所有行都有app。如果输入'application'作为searchtext，那么只需要突出显示第二行。因为确切的 macth.like 我需要检查所有列，即应用程序、角色等。无需隐藏未匹配的行。仅当不显示匹配时才需要突出显示匹配。

如果用户输入“14”作为搜索文本需要突出显示所有行。如果他输入 1490 需要突出显示 1strow 并按原样显示剩余的行。请帮助我实现这一点。

我的提琴手：http://jsfiddle.net/kUxNj/4/

请根据这个修改我的提琴手。

【问题讨论】：

stackoverflow.com/questions/2644975/…

标签： javascript jquery

【解决方案1】：

你应该替换这个：

if ($(this).find('td:first-child').text().toUpperCase() === text.toUpperCase() ||
                    $(this).find("td:eq(1)").text().toUpperCase() === text.toUpperCase()
                   )

有了这个：

if ($(this).find('td:first-child').text().toUpperCase().indexOf(text.toUpperCase()) != -1 ||
                    $(this).find("td:eq(1)").text().toUpperCase().indexOf(text.toUpperCase()) != -1
                   )

它是如何工作的：您的代码查看给定文本是否等于到其中一行，但我的代码检查其中一行是否包含给定文本，使用indexOf() method。

为了避免隐藏不匹配的元素，删除以下代码：

if(grid.find('td.result').length >0){
                grid.find('td').not('.result').parent('tr').hide();
            }

更新小提琴：http://jsfiddle.net/kUxNj/7/

【讨论】：

不需要隐藏不匹配的记录。如果匹配应该应用颜色，而不是显示其他记录。

【解决方案2】：

使用match() 方法代替相等检查：

if ($(this).find('td:first-child').text().toUpperCase().match( text.toUpperCase()) ||
    $(this).find("td:eq(1)").text().toUpperCase().match( text.toUpperCase())) 
{
    $(this).children('td').addClass('result');
}

我还删除了 hide() 和 show() 调用，因为它们对于像您要求的那样突出显示行是多余的。

更新小提琴：http://jsfiddle.net/kUxNj/9/

【讨论】：