突出TD文本搜索与输入

HTML：突出TD文本搜索与输入

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

CSS：

.highlighted { 
    background-color: yellow; 
}

我想强调的是包含搜索项的<td>，羯羊它是在td或输入中，从#search加入.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/

来源

2016-02-12 Fabrizio Mazzoni

在您面临的确切问题之外，您可以做出一些小改进。首先用''包装你的标题行，其他行用''，那么你可以做'$（。searchtbl）.find（“tbody tr”）''而不需要'.not（“tr：first”）' – freefaller

另外，如果您试图突出显示多个项目，那么您的代码稍有缺陷。您将基于'data'数组中的每个单独项添加和删除类。这意味着如果您添加该类是因为您已经找到数组中的第一个单词，那么如果您不在数组中的第二个单词中找到该单词，则会立即将其删除 – freefaller

你的问题是什么，该文本不是直接的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/

来源

2016-02-12 08:26:07 KWeiss

约

$("#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'); 
      } 
     } 
    })  
})

来源

2016-02-12 08:25:01 Plebsori

看，这就是工作的代码，我加入。你的问题是你只在td搜索文本。

但在里面td你有输入标签你忘了搜索。你需要搜索它。

所以我有正确的，请看看这将工作。

可能，这将有助于

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

 
     } 
 
    }) 
 
    }) 
 
});

.highlighted { 
 
    background-color: yellow; 
 
}

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

来源

2016-02-12 08:29:40 Rahul

简短的回答是：搜索 “输入”，而不是 “TD” 并使用 “VAL（）” 而不是“文本（）”

$("#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/

来源

2016-02-12 08:35:03

突出TD文本搜索与输入

回答

相关问题