Question

我有一个包含多行的表，这些行又有多个单元格。在我的桌子上方，我有基于表格中数据的按钮，有2行，每行有一定数量的按钮，1是＆＃34;类型＆＃34;另一个是＆＃34;体重＆＃34;所以看起来像这样：

2500
2300
2400
1
2
3

因此有6个按钮3代表重量。其他3种是汽车类型。所以，当我按下按钮＆＃34; 2500＆＃34;将显示3行，其他行将隐藏。但后来我想展示所有重量超过的汽车＆＃34; 2500＆＃34;并且类型为＆＃34; 1＆＃34;，所以我点击按钮。但是当我点击＆＃34; 1＆＃34;它将显示所有类型为＆＃34; 1＆＃34;所以它完全忽略了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>

Answer 1

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

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

在上面的代码段中，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属性指定目标单元格的索引。我们也可以使用标题单元格的文本作为过滤键而不是索引，但需要另一次迭代。

jQuery基于单击的按钮显示/隐藏表行

1 个答案: