为什么CSS样式无法在javascript中申请匹配行？

Question

If records are matching with searchtext need to hightlight that entire row but not applying that css style.

My javascript function

  $(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();

My 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>

Table Data :

applicationame   role
application1     appadministrator
app              developer
application2      tester

if i given 'app'as search text need to highlight secondrow only .highlightling firstrow also because 'app' is there in role of firstrow..exact match should be highlight on every rows.please tell me.

Please check my code i need to highlight the matching record row .if searchtext matching with table column data need to highlight the entire row.but not applying css in above code.

Answer 1

It seems like you are not applying the result class to the correct element. In your CSS, the following line defines the result class for TDs:

table.tablesorter tbody td.result

But in your javascript, this line will apply it to the table row:

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

So by changing this line to

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

you should be okay.

Update: Based on your feedback, I've created an example on jsFiddle for you: 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');