-3

我已经有一个解决方案，但它很乱，可以使用一些调整。基本上，我在一个页面上有两个表，每个表都有一个输入文本框，每一列都有一个相应的过滤器名称。这个想法是，当用户在该列上方键入时，表格正在被每个变量过滤。这是我找到解决方案的地方，但这仅适用于一个输入框和一个表格。此外，当您清除输入框时，整个表格都会清除。我喜欢这个例子不区分大小写，但它有一些错误。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>
4

3 回答 3

3

你可以做这样的事情，我没有重用你拥有的任何代码。我在矿山中解释了它在做什么。

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

小提琴

于 2013-01-25T22:07:47.823 回答
1

我不完全理解。我做了一些简单的例子，只有一列测试：

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

        });

    });
});

ps 如果你使用key tracking handle keydown 然后让浏览器通过setTimeout(yourjob,0) 更新。给用户带来更好的感受。

http://jsfiddle.net/mAvW/19/

于 2013-01-25T22:16:38.167 回答
1

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

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

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

         }

     })
  });
于 2013-01-25T22:38:24.907 回答