-3

私はすでに解決策を持っていますが、それは厄介で、いくつかの調整を使用することができます。基本的に、1つのページに2つのテーブルがあり、各テーブルには、対応するフィルター名を持つすべての列の入力テキストボックスがあります。ユーザーがその列の上に入力している間、テーブルは各変数によってフィルター処理されるという考え方です。これが私の解決策を見つけた場所ですが、これは1つの入力ボックスと1つのテーブルに対してのみです。また、入力ボックスをクリアすると、テーブル全体がクリアされます。この例では大文字と小文字が区別されないのが好きですが、いくつかのバグがあります。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

正確にはわかりません。列テストを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 キー追跡を使用する場合は、keydown を処理し、setTimeout(yourjob,0) までにブラウザーを更新させます。ユーザーにとってはより良い感触です。

http://jsfiddle.net/mAAvW/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 に答える