テーブル上でJqueryを複数回検索

テーブルがあり、同時に複数の行を検索できるようにしたいと考えています。テーブル上でJqueryを複数回検索

ボックス番号だけでなく、欺瞞に何かを置く。

これは私のHTMLです。

<table id="main-table"> 
<tbody> 
    <tr class="inputs open"> 
     <th><input type="text" name="box_number"></th> 
     <th><input type="text" name="make"></th> 
     <th><input type="text" name="qty"></th> 
     <th><input type="text" name="deception"></th> 
    </tr> 
    <tr> 
     <td>N57</td> 
     <td>N/a</td> 
     <td>8</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>N23</td> 
     <td>N/a</td> 
     <td>8d</td> 
     <td>test2</td> 
    </tr> 
</tbody>

これは、任意のヘルプ

$(document).on('change keyup click touchstart', ".inputs input", function (event) { 
var inputs = $(".inputs input"); 
    $.each(inputs, function() { 
     //Get the index 
     var inputIndex = $(this).closest('th').index(); 
     //Getting the input val 
     var inputVal = $(this).val().toLowerCase(); 
     //Getting all tr other then add new 
     var $trList = $(this).parent().parent().siblings().not(".add_new_item"); 
     //Each tr list 
     $.each($trList, function() { 
      //Getting each td from the td 
      var $td = $($trList).children().eq(inputIndex); 
      if (($td.text().toLowerCase().indexOf(inputVal) > -1) || inputVal.length < 1) { //Check if the search term is in the td text 
       //$(this).removeClass("hide"); 
      } else { 
       if ($(this).hasClass('first-item')) { 

       } else { 
        $(this).addClass("hide"); 
       } 
      } 
     }); 
    }); 
});

おかげで私のJSです。

出典

2017-10-06 jobbo

複数のテキストボックスを使用する代わりに、単一のテキストボックス&を使用して、テーブルのtdタグの値を確認できます。

<html> 
<body> 
    <table id="main-table"> 
      <input type="text" id="box_number"> 
     <tbody> 

      <tr> 
       <td>N57</td> 
       <td>N/a</td> 
       <td>8</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>N23</td> 
       <td>N/a</td> 
       <td>8d</td> 
       <td>test2</td> 
      </tr> 
     </tbody> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
     <script> 
      $(document).on('change keyup click touchstart', "#box_number", function (event) { 
       var input = $("#box_number").val(); 
        $("tr").each(function(i){ 
         $(this).hide(); 
        }); 
        $("tr").find("td").each(function(data){ 
         var v = $(this);       
         if(v.text().includes(input))       
         v.closest("tr").show(); 

        }); 

        }); 
     </script> 
</body> 
</html>

出典

2017-10-06 12:57:54

これは機能しません。複数の検索を同時に実行したいと考えています。 1行を何か検索し、次に2行を何か他の行に検索するようにします。 – jobbo

テーブル上でJqueryを複数回検索

答えて

関連する問題