我想根据按钮中的文本切换 table 行过滤器

Question

<button id="btn">Car</button>
<button id="btn1">Bike</button>
<table id="vehicles">
  <tr>
    <th>Type</th>
    <th>Color</th>
    <th>Wheels</th>
  </tr>
  <tr>
    <td>Car</td>
    <td>Red</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Blue</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Car</td>
    <td>Blue</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Red</td>
    <td>2</td>
  </tr>
</table>
<script>
$(function () {
    $("#btn").click(function() {
       var type = $(this).text();
        $('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
    });
    $("#btn1").click(function() {
       var type = $(this).text();
        $('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
    });
});
</script>

添加到：Filtering: How to hide/show (toggle) certain table rows on click? 根据 Itotally 提供的解决方案，我正在根据按钮文本过滤 table 行。这是最有效的解决方案吗？

Answer 1

还有一些其他的解决方案

您可以根据自己的选择添加 select 并仅显示 selected 项目

在您搜索的 td 上添加 class 类型。

Demo

$("#choice").change(function(){
    var choice = $(this).val().toUpperCase();
    $("table tr").each(function (index) {
                if (index !== 0) {
                    $row = $(this);
                    var id = $row.find("td.type").text().toUpperCase();
                    if (id.indexOf(choice) == -1) {
                        $row.hide();
                    }
                    else {
                        $row.show();
                    }
                }
            });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choice">
<option value>All</option>
<option value="Bike">Bike</option>
<option value="Car">Car</option>
</select>

<table id="vehicles">
  <tr>
    <th>Type</th>
    <th>Color</th>
    <th>Wheels</th>
  </tr>
  <tr>
    <td class="type">Car</td>
    <td>Red</td>
    <td>4</td>
  </tr>
  <tr>
    <td class="type">Motorcycle</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="type">Bike</td>
    <td>Blue</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="type">Car</td>
    <td>Blue</td>
    <td>4</td>
  </tr>
  <tr>
    <td class="type">Bike</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="type">Motorcycle</td>
    <td>Red</td>
    <td>2</td>
  </tr>
</table>

如果有很多选择，这可以最大限度地减少按钮的数量

您也可以在 table 中轻松添加搜索

HTML

<input type="text" name="search" id="search">

Jquery

$("#search").keyup(function(){
    var search = $(this).val();
    $('td:first-child').parent('tr:not(:contains('+search+'))').toggle();
});

我想根据按钮中的文本切换 table 行过滤器

I want to toggle the table rows filter based on the text from buttons

jquery

html-table

filter

toggle

show-hide