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>

這是我的JS

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

感謝您的幫助。

來源

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

這是行不通的，因爲我希望能夠同時搜索多個。就像搜索第一行的東西，然後第二行的東西。 – jobbo

jquery多表搜索

回答

相關問題