爲什麼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');