我想根据按钮的文本来切换表格行过滤器 [英] I want to toggle the table rows filter based on the text from buttons

问题描述

 < button id =btn> Car< / button> 
< button id =btn1> Bike< / button> 
< table id =vehicles> 
< tr> 
< th>类型< / th> 
< th>颜色< / th> 
< th>车轮< / th> 
< / tr> 
< tr> 
< td>汽车< / td> 
< td>红色< / td> 
< td> 4< / td> 
< / tr> 
< tr> 
< td>摩托车< / td> 
< td>绿色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td> Bike< / td> 
< td>蓝色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td>汽车< / td> 
< td>蓝色< / td> 
< td> 4< / td> 
< / tr> 
< tr> 
< td> Bike< / td> 
< td>绿色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td>摩托车< / td> 
< td>红色< / 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（'键入+'））'）。toggle（）; 
}）; 
}）; 
< / script> 
  

加入：
基于解决方案由Itotally提供，我基于按钮（s）文本过滤表行。这是最有效的解决方案吗？

解决方案

还有一些解决方案

您可以添加一个选择与您的选择，并只显示所选项目

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

演示

< script src =  
 
 

您的按钮数量，如果有很多的选择

您也可以轻松地在您的表中添加搜索

HTML

 < input type =textname =searchid =search > 
  

Jquery

< （p）pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' parent（'tr：not（：contains（'+ search +'））'）。toggle（）;
}）;

<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>

Adding to: Filtering: How to hide/show (toggle) certain table rows on click? Based on the solution provided by Itotally, I am filtering table rows based on the button(s) text. Is this the most efficient solution?

解决方案

There is some other solutions

You can add a select with your choice and show only the selected item

Add the class type on td where you search.

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>

This can minimize your number of button if there is a lot of choice

You can easily add a search in your table too

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

这篇关于我想根据按钮的文本来切换表格行过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！