Fatal编程技术网

Javascript HTML实时筛选表

javascript jquery html function

Javascript HTML实时筛选表,javascript,jquery,html,function,Javascript,Jquery,Html,Function,我正在尝试创建一个实时过滤函数 我提到 这个网站写了我的功能，但我发现我不能过滤表 这是我的密码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.

我正在尝试创建一个实时过滤函数

我提到 这个网站写了我的功能，但我发现我不能过滤表

这是我的密码：

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


无标题文件
变量$rows=$（“#表tr”）；
$（“#内容”）.keyup（函数（）{
var val=$.trim（$（this.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（））{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
过滤器：
无语言价格
001C#7500
002Java7000
003C6000
004C++6500
005HP5000
006jQuery9000
007HTML5800
008VBasic6500
例如，我在文本框中键入“J”，然后表格将立即显示“java”行和“jQuery”行

我的问题在哪里？

将
脚本
块移动到页面末尾（就在
之前），或者将它们添加到
文档就绪事件中，如下所示：


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


请参阅此小提琴以了解示例：


您的代码和您引用的小提琴之间的区别在于，小提琴在
onload
事件期间包含JavaScript，而您提供的源代码只包含在
中展开的JavaScript，或者将
脚本
块移动到页面末尾（就在
之前）或者将它们添加到
文档准备
事件中，如下所示：


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


请参阅此小提琴以了解示例：


您的代码和您引用的fiddle之间的区别在于，fiddle在
onload
事件期间包含JavaScript，而您提供的源代码只包含在
中展开的JavaScript，我刚刚修改了它，以便在表上使用：


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');



这是您的
实际上，我最近为列表项编写了一个小的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');



这是您的
您是否尝试过将JavaScript移动到页面末尾（就在
之前）或将其包含在
jQuery（函数（$）{…}
中？问题是您的
$行
无法找到表。我尝试过，但无效。您是否尝试过将JavaScript移动到页面末尾（就在
之前或将其包含在
jQuery（函数（$）{…}
中？问题是您的
$rows
无法找到该表。我尝试了，但它不起作用