在Html中过滤表行

我创建了一个html页面，其中包含搜索文本和下表，其中包含表格中的一些数据。

我使用了JSFiddle上提供的代码。

但它没有用。 请提供类似示例的建议。

我使用简单的HTML，CSS和Javascript编码。

在这个jQuery中使用：

var $rows = $('#table td'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); 

我可以使用更简单的东西，因为这是一个混合应用程序吗？

我使用以下代码。 请检查

          var $rows = $('#table tr'); $('#tfq').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); });      
 
  
 
 
 
 
 
   <!-- for(i =0 ;i<4 ; i++) { document.write(''); document.write('') document.write('') document.write('') document.write('') document.write('') document.write('') document.write('') document.write('') } //-->  
 
 
 A 
 
 B 
 
 C 
 
 D 
 
12345
34566
345356
Tyjhue
 
   

Answer 1

包括Jquery

       
 
 
Apple
 
Green
 
 
 
Grapes
 
Green
 
 
 
Orange
 
Orange
 
 
    

运行代码，

Answer 2

在DOM准备好之后，应该解释JavaScript代码。

由于你在部分使用了脚本，所以#table tr元素还没有准备好; 因此jQuery无法选择元素。

您可以使用.ready()方法检查document是否已准备好：

 $(document).ready(function() { var $rows = $('#table tr'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); }); 

或者将标记放在结束标记之前的底部。

更多信息： http ： //learn.jquery.com/using-jquery-core/document-ready/