为什么CSS样式不适用于JavaScript中的匹配行？

Question

如果记录与searchtext匹配需要高亮整行但不应用该CSS样式。

我的JavaScript功能

$(function() { 
    grid = $('#tblsearchresult tbody'); 
    // handle search fields key up event 
    $('#search-term').keyup(function (e) { 
     text = $(this).val().trim(); // grab search term 
     if (text.length > 1) { 
     grid.find('tr:has(td)').css({ background: "" }); 
     grid.find('tr').show(); 
     // iterate through all grid rows 
     grid.find('tr').each(function (i) { 
      // check to see if search term matches ApplicationName column 
      if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase())) 
       $(this).addClass('result'); 
      // $(this).css({ background: "#A4D3EE" }); 
      // check to see if search term matches RoleName column 
      if ($(this).find("td:eq(1)").text().toUpperCase().match(text.toUpperCase())) 
       $(this).addClass('result'); 
     }); 
     } 
     else { 
     grid.find('tr:has(td)').css({ background: "" }); 
     grid.find('tr').show(); 
     } // if no matching name is found, show all rows 
    }); 
    }); 
    $('table').tablesorter(); 

我的CSS：

table.tablesorter tbody td.result { 
    background: #A4D3EE; 
    } 
    table.tablesorter { 
    font-family:arial; 
    color: rgb(51, 51, 51); 
    margin:10px 0pt 15px; 
    font-size: 10pt; 
    width: 100%; 
    text-align: left; 
    } 
    table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #8dbdd8; 
    border: 1px solid #FFF; 
    font-size: 10pt; 
    padding: 5px; 
    } 
    table.tablesorter thead tr .header:not(.nosort) { 
    background-image: url('/sorter/bg.gif'); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
    } 
    table.tablesorter tbody td { 
    background-color: rgb(239, 243, 251); 
    padding: 5px; 
    border: solid 1px #e8eef4; 

    vertical-align: top; 
    } 
    table.tablesorter tbody tr.odd td { 
    background-color:#F0F0F6; 
    } 
    table.tablesorter thead tr .headerSortUp:not(.nosort) { 
    background-image: url('/sorter/asc.gif'); 
    } 
    table.tablesorter thead tr .headerSortDown:not(.nosort) { 
    background-image: url('/sorter/desc.gif'); 
    } 
    table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
    background-color: #8dbdd8; 
    } 

UI设计：

<table id="tblsearchresult" class="tablesorter"> 
    <thead> 
    <tr> 
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

表数据：

applicationame role 
application1  appadministrator 
app    developer 
application2  tester 

如果我给'app'as搜索文本只需要突出显示第二行.highlightling firstrow也是因为'应用程序'在第一卷的角色中存在。完全匹配应突出显示在每一行上。请告诉我。

请检查我的代码，我需要突出显示匹配的记录行。如果与表列数据匹配的搜索文本需要突出显示整行，但不在上面的代码中应用css。

Answer 1

看起来好像你没有将结果类应用到正确的元素。在你的CSS，以下行定义的TD结果类：

table.tablesorter TBODY td.result

但在你的JavaScript，这条线将它应用到表行：

$（this）.addClass（'result'）; 。

因此，通过改变这一行

$（本）。儿童（ 'TD'）addClass（ '结果'）;

你应该没问题。

更新：根据您的反馈 ，我创建了一个例子上的jsfiddle你：http://jsfiddle.net/kUxNj/4/

   // check to see if search term matches ApplicationName column 
       if ($(this).find('td:first-child').text().toUpperCase() === text.toUpperCase()) 
        $(this).children('td').addClass('result'); 
       // check to see if search term matches RoleName column 
       if ($(this).find("td:eq(1)").text().toUpperCase() === text.toUpperCase()) 
        $(this).children('td').addClass('result');