如何過濾html table td屬性？

Question

我想過濾HTML表中的td屬性，但是它不返回任何結果。 我只想顯示包含該值的tr數據值屬性。 現在不返回我想要的結果

“我為此英語感到抱歉”

 function Search() { var value = $('#searchbar-4').val().toLowerCase(); if (value != "") { $("#grid-4 tbody tr").each( function() { var r = $(this).find("td[data-value*='" + value + "']"); if (r > -1) { $(this).show(); } else { $(this).hide(); } }); } else { ... } }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tb1" class="all-table"> <thead> <tr> <th class="td-fixed">Facility name</th> <th class="td-fixed2">Phone #</th> <th>City</th> <th>Speciality</th> </tr> </thead> <tbody> <tr> <td data-value="5" class="td-fixed">CCC</td> <td data-value="4" class="td-fixed2">00001111</td> <td data-value="2">Amsterdam</td> <td data-value="6">GGG</td> </tr> <tr> <td data-value="8" class="td-fixed">JJJ</td> <td dat-value="9" class="td-fixed2">55544444</td> <td data-value="55">London</td> <td data-value="15">MMM</td> </tr> <tr> <td data-value="14" class="td-fixed">AAA</td> <td data-value="19" class="td-fixed2">33332222</td> <td data-value="20">Paris</td> <td data-value="18">RRR</td> </tr> </tbody> </table> 

Answer 1

選擇所有行，將其隱藏，按給定值過濾並顯示過濾后的列表：

 function filterRows(myVal) { var rows = $('#tb1 tbody tr'); rows.hide(); var filteredRows = rows.filter(function() { var cells = $(this).find('td'); return cells.filter(function(){ return $(this).data('value') === myVal; }).length > 0; }); filteredRows.show(); } filterRows(55); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tb1" class="all-table"> <thead> <tr> <th class="td-fixed">Facility name</th> <th class="td-fixed2">Phone #</th> <th>City</th> <th>Speciality</th> </tr> </thead> <tbody> <tr> <td data-value="5" class="td-fixed">CCC</td> <td data-value="4" class="td-fixed2">00001111</td> <td data-value="2">Amsterdam</td> <td data-value="6">GGG</td> </tr> <tr> <td data-value="8" class="td-fixed">JJJ</td> <td data-value="9" class="td-fixed2">55544444</td> <td data-value="55">London</td> <td data-value="15">MMM</td> </tr> <tr> <td data-value="14" class="td-fixed">AAA</td> <td data-value="19" class="td-fixed2">33332222</td> <td data-value="20">Paris</td> <td data-value="18">RRR</td> </tr> </tbody> </table> 

Answer 2

我終於做到了，但是我不確定那是最好的方法。

 function FilterRows(event) { var value = event.value.toLowerCase(); var rows = $('#tb1 tbody tr'); rows.hide(); rows.each(function() { var row = $(this); var cells = $(this).find('td'); cells.each(function() { var val = $(this).attr('data-value'); if (val) { if (val.toString().toLowerCase().indexOf(value) > -1) { row.show(); } } }); }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <input onkeyup="FilterRows(this)" placeholder="Ara" /> <table id="tb1" class="all-table"> <thead> <tr> <th class="td-fixed">Facility name</th> <th class="td-fixed2">Phone #</th> <th>City</th> <th>Speciality</th> </tr> </thead> <tbody> <tr> <td data-value="CCC" class="td-fixed">CCC</td> <td data-value="00001111" class="td-fixed2">00001111</td> <td data-value="Amsterdam">Amsterdam</td> <td data-value="GGG">GGG</td> </tr> <tr> <td data-value="JJJ" class="td-fixed">JJJ</td> <td data-value="55544444" class="td-fixed2">55544444</td> <td data-value="London">London</td> <td data-value="MMM">MMM</td> </tr> <tr> <td data-value="AAA" class="td-fixed">AAA</td> <td data-value="33332222" class="td-fixed2">33332222</td> <td data-value="Paris">Paris</td> <td data-value="RRR">RRR</td> </tr> </tbody>