2つの類似したテーブルでのjavacriptテーブルの検索

Question

私は非常に似た構造の2つのテーブルを持っています。

私は私がテーブルを簡単に検索ボックスを検索することができますが見つかりましたこのjavascriptがあります。私は非常に多くの初心者の初心者です、それはコードの私の強みではありません。

$(document).ready(function() { 
    $(".search").keyup(function() { 
     var searchTerm = $(".search").val(); 
     var listItem = $('.results tbody').children('tr'); 
     var searchSplit = searchTerm.replace(/ /g, "'):containsi('") 

     $.extend($.expr[':'], { 
      'containsi': function(elem, i, match, array) { 
       return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
      } 
     }); 

     $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) { 
      $(this).attr('visible', 'false'); 
     }); 

     $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e) { 
      $(this).attr('visible', 'true'); 
     }); 

     var jobCount = $('.results tbody tr[visible="true"]').length; 
     $('.counter').text(jobCount + ' item'); 

     if (jobCount == '0') { 
      $('.no-result').show(); 
     } else { 
      $('.no-result').hide(); 
     } 
    }); 
}); 

このコードは、ページに1つの表しかない場合にはうまく機能します。私の問題は、私は2です。

ここはテーブルの1つで、もう1つはヘッダーと実際のデータの内容を除いて全く同じです。

<div class="form-group pull-right"> 
     <div class="input-group"> 
      <input type="text" class="search form-control" placeholder="Search:"> 
      <span class="input-group-btn"> 
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#devices"> 
        Add Device 
       </button> 
      </span> 
     </div> 
    </div> 
    <span class="counter pull-right"></span> 
    <table class="table table-responsive table-hover table-bordered results"> 
     <thead> 
      <tr> 
       <th class="col-md-3">Device #</th> 
       <th class="col-md-3">Brand</th> 
       <th class="col-md-3">Model</th> 
       <th class="col-md-3">Color</th> 
      </tr> 
      <tr class="warning no-result"> 
       <td colspan="7"><i class="fa fa-warning"></i> No result</td> 
      </tr> 
     </thead> 
     <tbody> 

      <? 

      $sql = "SELECT * FROM devices"; 

      if(!$result = $db->query($sql)){ 
       die('There was an error running the query [' . $db->error . ']'); 
      } 

      while($row = $result->fetch_assoc()){         
       ?> 
       <tr> 
        <th scope="row"><?=$row['uniqueID'];?></th> 
        <td><?=$row['Brand'];?></td> 
        <td><?=$row['Model'];?></td> 
        <td><?=$row['Color'];?></td> 
       </tr> 
       <? 
      } 
      ?> 


     </tbody> 
    </table> 

私はjavascriptでセレクタを変更するようなことを試みましたが、動作させることができません。私はちょうどそれを壊して、元のコードに戻ります。私はこれをどうやって行うのか分かりません。

2つのテーブルを個別に処理するためにJavaScriptコードを変更するにはどうすればよいですか？

JSFiddle：https://jsfiddle.net/vdemqwLx/

Answer 1

ここでの問題は$(".results tbody")および他のすべてのセレクターとあなたは両方のテーブルを選択していることです。入力フィールドでイベントが生成された適切なテーブルを選択するだけで済みます。

HTML構造の依存性を少なくするために、data属性を使用して対応する表を識別することをお勧めします。これら

内のJSで次に

<input type="text" class="search form-control" placeholder="Search:" data-table="table1" data-counter="counter1"> 
... 
<span id="counter1" class="counter pull-right"></span> 
<table id="table1" class="table table-responsive table-hover table-bordered results"> 
... 

（他と同じ）

、代わりに文書全体で検索すると、検索

//this should go outside 
$.extend($.expr[':'], { 
    'containsi': function(elem, i, match, array) { 
     return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

$(document).ready(function() { 
    $(".search").on("input",function() { //input will also detect paste, undo, etc. 
     //this executes for both inputs, lets get the table and counter IDs 
     var tableId=$(this).data("table"); 
     var tableElem=$("#"+tableId); //select the table by its ID 
     var counterId=$(this).data("counter"); 

     var searchTerm = $(this).val(); //use this, otherwise you're always getting the value of the first .search 
     var listItem = $(tableElem).find("tbody").children('tr'); //now find within the table (otherwise always selects the first .resulst) 
     var searchSplit = searchTerm.replace(/ /g, "'):containsi('") 

     $(tableElem).find("tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) { 
      $(this).attr('visible', 'false'); 
     }); 

     $(tableElem).find("tbody tr:containsi('" + searchSplit + "')").each(function(e) { 
      $(this).attr('visible', 'true'); 
     }); 

     var jobCount = $(tableElem).find("tbody tr[visible='true']").length; 
     $("#"+counterId).text(jobCount + ' item'); //the same with the counter 

     if (jobCount == '0') { 
      $(tableElem).find(".no-result").show(); 
     } else { 
      $(tableElem).find(".no-result").hide(); 
     } 
    }); 
}); 

それは、私がここで直接書いたテスト。何かにもっと説明が必要なのかどうか聞いてください。 `$ .extend（$の宣言

Answer 2

これは

アイソインスタンス主容器まで横断し、closest()とfind()

を使用して要素のクラスのためにそのコンテナインスタンス内を見ることによって、ページ内のコンポーネントを繰り返すための典型的なパターンです。

またはメイン容器から始めて、とfind()を使用して内部の要素を分離してください

最初のアプローチ

$(".search").keyup(function(){ 
    // get group instance 
    var $fGroup = $(this).closest('.form-group'), 
     //isolate rows within group 
     $rows = $fGroup.find(".results tbody tr") 
     //visible rows filter 
     var $visibleRows = $rows.filter(":containsi('" + searchSplit + "')").attr('visible','true'); 

     $rows.not($visibleRows).attr('visible','false'); 
     // no-result instance 
     $fgroup.find(('.no-result').toggle($visibleRows.length); 

}); 

第二のアプローチ

$('.form-group').each(function() { 
    var $fGroup = $(this); 
    // apply event listener to instance of search 
    $fGroup.find(".search").keyup(function() { 

    var $rows = $fGroup.find(".results tbody tr") 
     //visible rows filter 
    var $visibleRows = $rows.filter(":containsi('" + searchSplit + "')").attr('visible', 'true'); 

    $rows.not($visibleRows).attr('visible', 'false'); 
    // no-result instance 
    $fgroup.find('.no-result').toggle($visibleRows.length); 


    }); 
})