突出显示包含来自输​​入的搜索文本的td

Question

HTML：

  NSMutableDictionary *dictToPass = [[NSMutableDictionary alloc]init];
     for(id key in jsonDictionary.allKeys) {
        id value = [jsonDictionary objectForKey:key];
         [dictToPass setObject:value forKey:key];
    }
    [obj printDirWithDictionary:dictToPass];

CSS：

<input type='text' id='search'>
<table class='searchtbl'>
   <tr><th>ID</th><th>DESCRIPTION</th></tr>
   <tr><td>1</td><td><input type='text' value='FROG'></td></tr>
   <tr><td>2</td><td><input type='text' value='MOUSE'></td></tr>
   <tr><td>3</td><td><input type='text' value='CAT'></td></tr>
</table>

我尝试通过向.highlighted { background-color: yellow; } 添加<td>类来突出显示包含搜索词的#search，无论是在td还是在输入中，.highlighted ：

jQuery的：

$("#search").keyup(function () {
    var data = this.value.toUpperCase().split(" ");    
    $(".searchtbl").find("tr").not("tr:first").find("td").each(function (index, elem) {
    var $elem = $(elem);
        for (var d = 0; d < data.length; ++d) {
            // Highlight
            if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
                $elem.addClass('highlighted');   
            } else {
                $elem.removeClass('highlighted');   
            }
        }
    })     
}) 

由于某种原因，它没有突出显示单元格。

https://jsfiddle.net/fabriziomazzoni79/zpaLv4pm/

Answer 1

怎么样？

$("#search").keyup(function () {
    var data = $(this).val().toUpperCase().split(" ");
    $(".searchtbl input[type='text']").each(function (i, e) {
        for (var d = 0; d < data.length; ++d) {
            // Highlight
            if ($(this).val().toUpperCase().indexOf(data[d]) != -1) {
                $(this).closest("td").addClass('highlighted');
            } else {
                $(this).closest("td").removeClass('highlighted');
            }
        }
    })     
}) 

Answer 2

您的问题是文本不是直接位于td元素内部，而是位于元素内部的输入内部。所以只需替换：

if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {

带

if ($elem.find('input').length > 0 && 
    $elem.find('input').val().toUpperCase().indexOf(data[d]) != -1) {

https://jsfiddle.net/zpaLv4pm/6/

Answer 3

看到这是我添加的工作代码。 您的问题是您只是在 td 中搜索文字。

但是在 td 内，你有输入标签，你忘记搜索了。 你需要搜索它。

所以我说得对，请看看这会有效。

可能会有所帮助

＆＃13;

＆＃13;

$(document).ready(function(e) {
  $("#search").keyup(function() {

    if ($(this).val() == "") {
      $(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
      $(".searchtbl").find("tr").not("tr:first").find("td").find(".inputType").removeClass('highlighted');
      return false;
    }
    var data = this.value.toUpperCase().split(" ");
    $(".searchtbl").find("tr").not("tr:first").find("td").each(function(index, elem) {
      var $elem = $(elem);
      for (var d = 0; d < data.length; ++d) {
        // Highlight
        if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
          $elem.addClass('highlighted');
        } else {
          $elem.removeClass('highlighted');
        }
        //console.log();

        if ($elem.find(".inputType").length == 1) {

          if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
            $elem.addClass('highlighted');
            $elem.find(".inputType").addClass('highlighted');
          } else {
            $elem.removeClass('highlighted');
            $elem.find(".inputType").removeClass('highlighted');
          }
        }

      }
    })
  })
});

＆＃13;

.highlighted {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='search'>
<table class='searchtbl'>
  <tr>
    <th>ID</th>
    <th>DESCRIPTION</th>
  </tr>
  <tr>
    <td>1</td>
    <td>
      <input type='text' value='FROG' class="inputType">
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <input type='text' value='MOUSE' class="inputType">
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>
      <input type='text' value='CAT' class="inputType">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

简短的回答是： 搜索“输入”而不是“td” 并使用“val（）”而不是“text（）”

$("#search").keyup(function () {
    var data = this.value.toUpperCase().split(" ");    
    $(".searchtbl").find( ":input" ).each(function (index, elem) {
    var $elem = $(elem);
        for (var d = 0; d < data.length; ++d) {
                //alert($elem.val());
            // Highlight
            if ($elem.val().toUpperCase().indexOf(data[d].toUpperCase()) != -1) {
                $elem.addClass('highlighted');

            } else {
                $elem.removeClass('highlighted');   
            }
        }
    })     
}) 

https://jsfiddle.net/nc2k21gt/