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

标签 jquery sorting filter html-table

我有一个包含多行的表格，其中又包含多个单元格。 在我的表格上方，我有基于表格中数据的按钮，有 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>

最佳答案

过滤匹配行的一个选项是创建过滤条件数组。这使您可以灵活地过滤匹配的行。首先，我使用 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 根据单击的按钮显示/隐藏表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34197112/

上一篇：jquery - 时间选择器自动打开

下一篇：jquery - 应用columnchooser时如何保持原始jqgrid宽度？

相关文章：

java - Spring Boot 过滤器始终映射到/*

jquery - WebAPI 实例化对象，即使它们在 JSON 中为 null

jquery - 隐藏\显示内容覆盖其他剧透按钮

javascript - 从 jQuery.get() 或 jQuery.ajax() 访问响应

iphone - 通过另一个 NSMutableArray 使用自定义对象对 NSMutableArray 进行排序

java - 使用两个不同的标准对数组进行排序

r - 在 R 中满足条件后过滤组中的后续行

java - 在 log4j2 中按类名过滤

php - 如何显示从 mysql 获取的每一行的行号

Java - 按时间排序数组

©2024 IT工具网  联系我们