Почему стили css не применяются для сопоставления строк в javascript?

Question

Если записи соответствуют поисковому тексту, необходимо зафрахтовать всю строку, но не применять этот стиль 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 Design:

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

Таблица данных:

applicationame role 
application1  appadministrator 
app    developer 
application2  tester 

, если я дал «текст поиска», чтобы выделить секундомер только. Высокое освещение в первый раз также потому, что «приложение» присутствует в роли firstrow..ответное значение должно быть выделено на каждой строке. Скажите мне.

Пожалуйста, проверьте мой код. Мне нужно выделить соответствующую строку записи. Если сопоставление поиска с данными столбца таблицы необходимо выделить всю строку. Но не применять css в вышеприведенном коде.

Answer 1

Кажется, что вы не применяете класс результатов к правильному элементу. В вашем CSS, следующая строка определяет класс результата для TDs:

table.tablesorter TBODY td.result

Но в вашем JavaScript, эта строка будет применить его к строке таблицы:

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

Так, изменяя эту строку

$ (это) .children ('' тд) addClass ('результат');

все должно быть в порядке.

Update: Основываясь на вашей обратной связи, я создал пример на 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');