为什么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;
  }

用户界面设计：

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

表格数据：

applicationame   role
application1     appadministrator
app              developer
application2      tester

如果我给'app'作为搜索文本，则仅需突出显示第二行。突出显示第一行也是因为'app'充当firstrow的角色。精确匹配应在每一行上突出显示。请告诉我。

请检查我的代码，我需要突出显示匹配的记录行。如果与表列数据匹配的searchtext需要突出显示整个行。但不要在上述代码中应用CSS。

Answer 1

似乎您没有将结果类应用于正确的元素。 在您的CSS中，以下行定义了TD的结果类：

table.tablesorter tbody td.result

但是在您的javascript中，这一行会将其应用于表格行：

$（this）.addClass（'result'）;

因此，将这一行更改为

$（this）.children（'td'）。addClass（'result'）;

你应该没事的

更新：根据您的反馈，我在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');