HTML實時濾波器表

我想創建一個實時濾波器函數。HTML實時濾波器表

我引用了 http://jsfiddle.net/7BUmG/2/ 這個網站寫我的功能，但我發現我不能過濾表。

這裏是我的代碼：

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    <script> 
     var $rows = $("#table tr"); 
     $("#content").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(); 
     }); 
    </script> 
</head> 

<body> 
Filter : <input type="text"id="content"/> 
<table id="table"> 
    <tr><th>No</th><th>Language</th><th>Price</th></tr> 
    <tr><td>001</td><td>C#</td><td>7500</td></tr> 
    <tr><td>002</td><td>Java</td><td>7000</td></tr> 
    <tr><td>003</td><td>C</td><td>6000</td></tr> 
    <tr><td>004</td><td>C++</td><td>6500</td></tr> 
    <tr><td>005</td><td>PHP</td><td>5000</td></tr> 
    <tr><td>006</td><td>jQuery</td><td>9000</td></tr> 
    <tr><td>007</td><td>HTML5</td><td>800</td></tr> 
    <tr><td>008</td><td>VBasic</td><td>6500</td></tr> 
</table> 
</body> 
</html>

比如我輸入「J」到文本框中，然後該表將立即顯示的「java」行和「jQuery的」行。

我的問題在哪裏？

來源

2015-11-12 Adonis.C

您是否試過將您的JavaScript移動到頁面末尾（在''之前或在'jQuery（function（$）{...}'）中包含它？問題是喲你'$ rows'無法找到表。 – Quantastical

我試過了但是不起作用 –

無論是script塊移動到頁面（只是</body>之前）的結束或將它們添加到document ready事件，像這樣：

jQuery(function($){ 
    var $rows = $("#table tr"); 
    $("#content").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://jsfiddle.net/b71oy2ke/1/

您的代碼與您引用的小提琴之間的區別在於，在onload事件期間小提琴包含JavaScript，而您提供的源代碼僅包含它在<head>中解包的代碼。

來源

2015-11-12 14:09:18 Quantastical

工作太好了 –

其實我最近寫了列表項的小jQuery的過濾功能，我剛纔已經修改了它的使用上表：

jQuery.fn.customFilter = function(listObj) { 
    var list = listObj; 
    var $input = this; 
    var $lis = $(list).find('tr'); 
    $input.on('input', function() { 
     var term = $input.val().toLowerCase(); 
     $.each($lis, function() { 
     isContains = $(this).text().toLowerCase().indexOf(term) > -1; 
     if(isContains) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
     }); 
    }); 
    return this; 
}

實例應用：

$('#content').customFilter('#table');

這是你的updated Fiddle

來源

2015-11-12 14:16:12 Und3rTow

工作太過於 –

HTML實時濾波器表

回答

相關問題