Question

我已经有了一个解决方案，但它很麻烦，可以使用一些调整。基本上，我在页面上有两个表，每个表都有一个输入文本框，每个列都有一个相应的过滤器名称。这个想法是，当用户在该列上方键入时，该表将被每个变量过滤。这是我找到我的解决方案的地方，但这仅适用于一个输入框和一个表。清除输入框时，整个表格也会清除。我喜欢这个例子不区分大小写，但它有一些错误。 http://www.marceble.com/2010/02/simple-jquery-table-row-filter/这是我放在一起的jsfiddle，但它并没有过滤它应该的。 http://jsfiddle.net/anschwem/mAAvW/

代码：

<script>
 $(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#searchInput").keyup(function(){

          $("#fbody").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#fbody").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
  });
</script>

HTML：

<table>
  <thead>
    <tr>
        <td><input value="Animals"></td>
        <td><input value="Numbers"></td>   
    </tr>
  </thead>
  <tbody>
    <tr><td>cat</td><td>one</td></tr>
    <tr><td>dog</td><td>two</td></tr>
    <tr><td>cat</td><td>three</td></tr>
    <tr><td>moose</td><td>four</td></tr>
    <tr><td>mouse</td><td>five</td></tr>
    <tr><td>dog</td><td>six</td></tr>
  </tbody>
</table>

Answer 1

您可以执行此类操作，但我没有重复使用您拥有的任何代码。我在矿井里解释了它在做什么。

$("th input[type=text]").keyup(function () {
    var reg = new RegExp(this.value, 'i'); // <-- regex case insensitive
    var ind = $(this).closest('th').index(); // index of th - so we know which side to filter
    var tds = $('tr').find('td:eq(' + ind + ')'); // get the corresponding td's
    var match = tds.filter(function (i, v) {
      return reg.test($(v).text()); // return only td's that match
    });
    tds.not(match).css('visibility', 'hidden'); // hide ones that don't match
    match.css('visibility', 'visible'); // show matching
});

FIDDLE

Answer 2

我完全不明白。我做了一些简单的例子，只进行了一次列测试：

 $(document).ready(function() {

    $("input[name=Animals]").keydown(function() {
        setTimeout(function() {
            $("td:first", "tbody>tr").each(function() {
                lookfor = $("input[name=Animals]").val();
                if (new RegExp(lookfor, "i").test($(this).text()))
                    $(this).parent().show();
                else
                    $(this).parent().fadeOut();
            }, 0);

        });

    });
});

P.S。如果你使用密钥跟踪句柄keydown然后让浏览器通过setTimeout（yourjob，0）更新。它对用户有更好的感觉。

http://jsfiddle.net/mAAvW/19/

Answer 3

嗯，这是我的解决方案...... 没有正则表达式更多的是使用你使用的相同东西的简单解决方案

只要您的搜索框具有相同的类名，这将是完美的

   $(document).ready(function() {
   var column ;
    $(':input').focus(function(){
        column = $(this).parent('td').index();
        column = column+1;
        console.log(column); //logs number of the column

    })
     $('.search').keyup(function(){

        var v = $(this).val();
         if(v.length == 0) {
         $('#fbody tr td:nth-child('+column+')').show();

         }else{
            console.log(v.length);
            $('#fbody tr td:nth-child('+column+')').not( $('#fbody tr td:nth-child('+column+')').filter("*:contains('"+v+"')")).hide();
            $('#fbody tr td:nth-child('+column+')').filter("*:contains('"+v+"')").show();

         }

     })
  });

按键输入值按键过滤表（简化我的代码）

3 个答案: