表格分揀機沒有應用表格CSS樣式後？

Question

我爲頁面中的表應用了tablesorter css樣式。並且我還需要爲行應用另一種樣式，如果文本框輸入的數據與表格網格數據的任何列匹配需要爲該行應用不同的顏色。

$(function() { 

     grid = $('#tblsearchresult'); 
     // handle search fields key up event 
     $('#search-term').keyup(function (e) { 
      text = $(this).val(); // grab search term 

      if (text.length > 1) { 

       // iterate through all grid rows 
       grid.find('tr').each(function (i) { 

        if ($(this).find('td:eq(1)').text().toUpperCase().match(text.toUpperCase())) 
         $(this).css({ background: "#A4D3EE" }); 

        if ($(this).find("td:eq(2)").text().toUpperCase().match(text.toUpperCase())) 
         $(this).css({ background: "#A4D3EE" }); 

        if ($(this).find("td:eq(3)").text().toUpperCase().match(text.toUpperCase())) 
         $(this).css({ background: "#A4D3EE" }); 

        if ($(this).find("td:eq(4)").text().toUpperCase().match(text.toUpperCase())) 
         $(this).css({ background: "#A4D3EE" }); 

       }); 
      } 
      else { 
       grid.find('tr:has(td)').css({ background: "" }); 
       grid.find('tr').show(); 
      } // if no matching name is found, show all rows 
     }); 

    }); 





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

         <th>ApplicationName</th> 

        </tr> 
      </thead> 

     <tbody> 
       <% foreach (var request in Model.ApplicationRoles) 
        { %> 
       <tr> 

        <td> 
         <span id="appName_<%: request.Id%>"> 
          <%: request.Application.Name%></span> 
        </td> 
    </tr> 
    </tbody> 
    </table> 

的tablesorter CSS：

table.tablesorter { 
    font-family:arial; 
    color: rgb(51, 51, 51); 
    margin:10px 0pt 15px; 
    font-size: 8pt; 
    width: 100%; 
    text-align: left; 
} 
table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #8dbdd8; 
    border: 1px solid #FFF; 
    font-size: 8pt; 
    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; 
} 
.divpager 
    { 
     display: inline-block; 
     float: left; 
    } 

我不能適用匿名函數行的顏色，當搜索文本與任何表網格行macthed data.please告訴我。

Answer 1

試試這個代碼（demo）：

$(function() { 
    grid = $('#tblsearchresult tbody'); 
    // handle search fields key up event 
    $('#search-term').on('keyup search', function (e) { 
     text = $(this).val().toUpperCase(); // grab search term 
     if (text.length > 1) { 
      // iterate through all grid rows 
      grid.find('tr').each(function (i) { 
       var found = false; 
       $(this).children().each(function(j){ 
        if (this.textContent.toUpperCase().match(text)) { 
         $(this).addClass('result'); 
         found = true; 
        } 
       }); 
       $(this).toggle(found); 
      }); 
     } else { 
      grid.find('td').removeClass('result'); 
      grid.find('tr').show(); 
     } // if no matching name is found, show all rows 
    }); 
}); 

$('table').tablesorter();