CSS 스타일이 자바 스크립트에서 일치하는 행에 적용되지 않는 이유는 무엇입니까?

Question

레코드가 searchtext와 일치하는 경우 전체 행을 강조 표시하고 해당 CSS 스타일을 적용하지 않아야합니다.

내 자바 스크립트 함수

$(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 검색 텍스트를 주면 secondrow 만 강조 표시해야합니다.'app '이 firstrow..exact match의 역할에 있기 때문에 .highlightling firstrow도 모든 행에 강조 표시해야합니다.

내 코드를 확인하십시오 일치하는 레코드 행을 강조 표시해야합니다. 테이블 열 데이터와 일치하는 검색 텍스트는 위의 코드에서 CSS를 적용하지 않고 전체 행을 강조 표시해야합니다.

Answer 1

결과 클래스를 올바른 요소에 적용하지 않는 것 같습니다.

이

table.tablesorter의 TBODY의 td.result이

하지만 당신의 자바 스크립트

는,이 라인은 테이블 행에 적용됩니다 : 당신의 CSS에서 다음 줄은 TDs를위한 결과 클래스를 정의

$ (this) .addClass ('result'); .

그래서 ('TD')를 .children

$ (이)

이 라인을 변경하여 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');