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;
  }

UI设计：

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

表数据：

applicationame   role
application1     appadministrator
app              developer
application2      tester

如果我给'app'as搜索文本只需要突出secondrow.highlightling firstrow也因为'app'在firstrow中有作用。每个行都应该突出显示匹配。请告诉我。

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

Answer 1

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

table.tablesorter tbody td.result

但是在你的javascript中，这一行会将它应用到表格行：

$（本）.addClass（ '结果'）;

所以通过将此行更改为

$（本）。儿童（ 'TD'）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');

为什么css样式不适用于javascript中的匹配行？

1 个答案: