Question

我正在尝试创建一个实时过滤功能。

我引用了 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>

例如我输入＆＃34; J＆＃34;进入文本框然后表格将显示＆＃34; java＆＃34;行和＆＃34; jQuery＆＃34;立即排。

我的问题在哪里？

Answer 1

将public class Student implements Serializable { private String studentNumber; private String firstName; private String lastName; private ArrayList<Exam> exams; }块移动到页面末尾（就在script之前）或将它们添加到</body>事件中，如下所示：

document ready

请参阅此小提琴以获取示例：http://jsfiddle.net/b71oy2ke/1/

您的代码与您引用的小提琴之间的区别在于，小提琴包含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(); }); });事件期间的JavaScript，而您提供的源代码只是将其包含在onload中展开。

Answer 2

我实际上最近为列表项编写了一个小的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

HTML实时过滤表

2 个答案: