jQuery 根据单击的按钮显示/隐藏表格行答案

【问题标题】：jQuery show/hide table rows based on clicked buttonsjQuery 根据单击的按钮显示/隐藏表格行
【发布时间】：2016-03-15 19:21:19
【问题描述】：

我有一个包含多行的表，该表又包含多个单元格。在我的表上方，我有基于表中数据的按钮，有 2 行，每行有一定数量的按钮，1 是“类型”，另外 1 是“重量”，所以它可能看起来像这样：

2500
2300
2400
1
2
3

所以有 6 个按钮 3 代表重量。其他3个是汽车的类型。因此，当我按下按钮“2500”时，将显示 3 行，而其他行将隐藏。但后来我想显示所有重量为“2500”且类型为“1”的汽车，所以我点击了按钮。但是当我点击“1”时，它会显示所有类型为“1”的行，所以它完全忽略了 2500。那么我该如何解决这个问题？

这是我当前使用的 jQuery。

var criteria_type;
var criteria_gewicht;

$(".button_option").click(function() {

    if ($(this).hasClass("active_option")) {
        $(this).removeClass("active_option");
        if($(this).hasClass("filter_button_gewicht")){
            criteria_gewicht = "";
        }
        if($(this).hasClass("filter_button_type")){
            criteria_type = "";
        }
    }
    else{
        $(this).parent().find(".active_option").removeClass("active_option");
        $(this).addClass("active_option");
        if($(this).hasClass("filter_button_gewicht")){
            criteria_gewicht = $(this).val();
        }
        if($(this).hasClass("filter_button_type")){
            criteria_type = $(this).val();
        }
    }
    datadinges();

});


function datadinges(){

    if (criteria_type != "" || criteria_gewicht != "") {

            if (criteria_gewicht != null && criteria_type != null) {

                $('#vermogen_gewicht tr').each(function(i){
                    if ($('.type').html() == criteria_type && $('.gewicht').html() == criteria_gewicht) {
                        $('.type').parent().show();
                    }
                    else{
                        $('.type').parent().hide();
                    }
                });
            }
            else{
                $("p").prepend("Else &&"); //check if I am in else.
            }
        }      
    }

这是按钮的 html：

    <div class="filtertype">
        <?php
            foreach ($itemsuniek as $filter) { ?>
            <input type="button" class="filter_button_type button_option" value="<?php echo $filter; ?>" />
        <?php } ?>
    </div>
    <div class="filtertype_gewicht">
        <?php
            foreach ($itemssuniek as $filter) { ?>
            <input type="button" class="filter_button_gewicht button_option" value="<?php echo $filter; ?>" />
        <?php } ?>
    </div>

这是实际页面上的html：表格

<table id="vermogen_gewicht" class="table table-hover vermogen_gewicht">
    <thead>
        <tr>
            <th></th>
            <th>GVW</th>
            <th>Type</th>
            <th>Motor</th>
            <th>kW/pk</th>
            <th>Transmissie</th>
            <th class="prijs">Prijs <span>(excl. BTW/excl. BPM)</span></th>
        </tr>
    </thead>
    <tbody>

            <tr class="uitvoering_1         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht0" value="uitvoering_vermogen_gewicht0" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht0"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€16.990</td>
        <td id="prijsinner" class="hidden">16990</td>
    </tr>

            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht1" value="uitvoering_vermogen_gewicht1" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht1"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€18.985</td>
        <td id="prijsinner" class="hidden">18985</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht2" value="uitvoering_vermogen_gewicht2" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht2"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€19.810</td>
        <td id="prijsinner" class="hidden">19810</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht3" value="uitvoering_vermogen_gewicht3" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht3"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€20.635</td>
        <td id="prijsinner" class="hidden">20635</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht4" value="uitvoering_vermogen_gewicht4" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht4"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€20.900</td>
        <td id="prijsinner" class="hidden">20900</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht5" value="uitvoering_vermogen_gewicht5" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht5"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€21.725</td>
        <td id="prijsinner" class="hidden">21725</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht6" value="uitvoering_vermogen_gewicht6" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht6"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€22.550</td>
        <td id="prijsinner" class="hidden">22550</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht7" value="uitvoering_vermogen_gewicht7" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht7"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€22.415</td>
        <td id="prijsinner" class="hidden">22415</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht8" value="uitvoering_vermogen_gewicht8" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht8"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€23.240</td>
        <td id="prijsinner" class="hidden">23240</td>
    </tr>
            <tr class="uitvoering_2">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht9" value="uitvoering_vermogen_gewicht9" name="uitvoering_vermogen_gewicht">

        <label for="uitvoering_vermogen_gewicht9"></label>

        </td>
        <td class="gewicht" id="gewicht">2500</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€24.065</td>
        <td id="prijsinner" class="hidden">24065</td>
    </tr>

            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht10" value="uitvoering_vermogen_gewicht10" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht10"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€20.900</td>
        <td id="prijsinner" class="hidden">20900</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht11" value="uitvoering_vermogen_gewicht11" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht11"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€21.725</td>
        <td id="prijsinner" class="hidden">21725</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht12" value="uitvoering_vermogen_gewicht12" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht12"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">109 CDI</td>
        <td id="kw">65/89</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€22.550</td>
        <td id="prijsinner" class="hidden">22550</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht13" value="uitvoering_vermogen_gewicht13" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht13"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€22.815</td>
        <td id="prijsinner" class="hidden">22815</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht14" value="uitvoering_vermogen_gewicht14" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht14"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€23.640</td>
        <td id="prijsinner" class="hidden">23640</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht15" value="uitvoering_vermogen_gewicht15" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht15"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">111 CDI</td>
        <td id="kw">84/114</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€24.465</td>
        <td id="prijsinner" class="hidden">24465</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht16" value="uitvoering_vermogen_gewicht16" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht16"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€24.330</td>
        <td id="prijsinner" class="hidden">24330</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht17" value="uitvoering_vermogen_gewicht17" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht17"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€25.155</td>
        <td id="prijsinner" class="hidden">25155</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht18" value="uitvoering_vermogen_gewicht18" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht18"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">114 CDI</td>
        <td id="kw">100/136</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€25.980</td>
        <td id="prijsinner" class="hidden">25980</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht19" value="uitvoering_vermogen_gewicht19" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht19"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">116 CDI</td>
        <td id="kw">120/163</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€26.060</td>
        <td id="prijsinner" class="hidden">26060</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht20" value="uitvoering_vermogen_gewicht20" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht20"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">116 CDI</td>
        <td id="kw">120/163</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€26.885</td>
        <td id="prijsinner" class="hidden">26885</td>
    </tr>
            <tr class="uitvoering_3         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht21" value="uitvoering_vermogen_gewicht21" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht21"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">116 CDI</td>
        <td id="kw">120/163</td>
        <td id="transmissie">H6</td>
        <td id="prijs">€27.710</td>
        <td id="prijsinner" class="hidden">27710</td>
    </tr>

            <tr class="uitvoering_4         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht22" value="uitvoering_vermogen_gewicht22" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht22"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L1H1</td>
        <td id="motor">119 BlueTEC Euro VI</td>
        <td id="kw">140/190</td>
        <td id="transmissie">7G-TRONIC PLUS</td>
        <td id="prijs">€30.395</td>
        <td id="prijsinner" class="hidden">30395</td>
    </tr>
            <tr class="uitvoering_4         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht23" value="uitvoering_vermogen_gewicht23" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht23"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L2H1</td>
        <td id="motor">119 BlueTEC Euro VI</td>
        <td id="kw">140/190</td>
        <td id="transmissie">7G-TRONIC PLUS</td>
        <td id="prijs">€31.220</td>
        <td id="prijsinner" class="hidden">31220</td>
    </tr>
            <tr class="uitvoering_4         hidden">
        <td class="radiobutton">
        <input type="radio" id="uitvoering_vermogen_gewicht24" value="uitvoering_vermogen_gewicht24" name="uitvoering_vermogen_gewicht" disabled="disabled">

        <label for="uitvoering_vermogen_gewicht24"></label>

        </td>
        <td class="gewicht" id="gewicht">2800</td>
        <td class="type" id="type">L3H1</td>
        <td id="motor">119 BlueTEC Euro VI</td>
        <td id="kw">140/190</td>
        <td id="transmissie">7G-TRONIC PLUS</td>
        <td id="prijs">€32.045</td>
        <td id="prijsinner" class="hidden">32045</td>
    </tr>

        </tbody>
    </table>

它有一些奇怪的格式，但你可以看看第一行，它们都是一样的。

这里是按钮：

<div class="filtertype">
        <input type="button" value="L1H1" class="filter_button_type button_option">
        <input type="button" value="L2H1" class="filter_button_type button_option">
        <input type="button" value="L3H1" class="filter_button_type button_option">
</div>

【问题讨论】：

为什么不使用 jquery 数据表插件，它有很棒的过滤功能。 datatables.net
感谢您的回答 :) 我在使用 Datatable 或 Tablesorter 时遇到的问题是我只是 jQuery 的初学者，也没有时间搜索 api/文档。复制/粘贴也不是一个选项，因为这些插件都没有与按钮一起使用。
datatables.net/examples/api/multi_filter_select.html 查看此链接，它演示了基于单个列的过滤。
您好，感谢您的回答，我会尽快检查。我已经看过那个了。它对我不起作用。我必须检查 ROW 而不是 Column 然后我必须检查 2 个值（我点击的按钮）如果它们存在于行中什么也不做，如果它们不存在我隐藏行。
请发布呈现的 HTML。 PHP 在这里没有任何作用。这是一个基本过滤，可以使用 vanilla JavaScript 完成。

标签： jquery sorting filter html-table

【解决方案1】：

过滤匹配行的一个选项是创建一个过滤条件数组。这使您可以灵活地过滤匹配的行。首先，我会使用data-* 属性将目标单元格的索引添加到按钮或按钮的父元素中。

<div class="filtertype" data-cell-index="2">
        <input type="button" value="L1H1" class="filter_button_type button_option">
        ...
</div>

在上面的 sn-p 中，data-cell-index 指定了目标单元格的索引。

然后我们确保每个按钮组只能有 0 或 1 个活动按钮。然后我们调用datadinges 来根据活动按钮过滤行：

var $button_option = $(".button_option").click(function() {
    $(this).toggleClass('active_option').siblings().removeClass('active_option');
    datadinges();
});

datadinges 获取每个组的活动按钮并创建一个对象数组。 index 是目标单元格的索引，value 是过滤值：

// cache the rows for better performance
var $rows = $('#vermogen_gewicht tbody tr');

function datadinges() {
   // create an array of objects based on the active buttons
   var filterCriteria = $button_option.filter('.active_option').map(function() {
      return {
         index: +this.parentNode.getAttribute('data-cell-index'),
         value: this.value
      }
   }).get();

   // get the length of the array
   var len = filterCriteria.length;

   // if there is no criteria show all the rows
   if ( len === 0 ) {
     return $rows.removeClass('hidden');
   }

   // hide all the rows and then show the matching rows
   $rows.addClass('hidden').filter(function(i, row) {
      // if the length of filtered criteria list 
      // is equal to the length of all filters
      return filterCriteria.filter(function(filter) {
          return row.cells[filter.index].textContent === filter.value;
      }).length === len;

   }).removeClass('hidden');
}

Here is a demo on jsfiddle.net.

现在您可以向标记添加更多按钮组，并使用data-filter-index 属性指定目标单元格的索引。我们也可以使用标题单元格的文本作为过滤键而不是索引，但这需要再次迭代。

【讨论】：

非常感谢您的回复，data-cell-index 究竟是什么？
@GertjanBrouwer 非常欢迎您。这只是一个属性。 data-* 属性是 HTML5 标准的一部分。它们允许您将自定义数据存储在属性中。
天哪，我的伙计，你是最棒的。这行得通。非常感谢。我现在将检查它是如何工作的，因为我不明白它:)
@GertjanBrouwer 确实非常欢迎您。我在代码 sn-ps 中添加了一些 cmets。我希望现在更容易理解了。