Question

我正在尝试使用jQuery对表进行排序。在我的表中，我需要排序2列，如果排序，则必须隐藏该行。

我的表在创建时看起来像这样：

<table id="vermogen_gewicht" class="table table-hover vermogen_gewicht">
<thead></thead>
<tbody>
    <tr class="uitvoering_1 ">
        <td class="radiobutton">
        <td id="gewicht" class="gewicht">2000</td>
        <td id="type" class="type">L1H1</td>
    </tr>
</tbody>

这是我用jQuery排序的一切。我使用的jquery是：

var criteria;
$('#filtertype').change(function(){
    var criteria = $(this).val();
    if(criteria == 'ALL'){
        $('.vermogen_gewicht tr').show();
        return;
    }
    $('.type').each(function(i,option){
        if($(this).html() == criteria){
            $(this).parent().show();
        }else {
            $(this).parent().hide();
        }
    });
});

这样做是因为我在<select>元素中选择了一个选项。然后隐藏与所选选项不具有相同值的元素。这按预期工作，但在我根据“类型”排序后，我现在想要根据“gewicht”进行排序;我使用此代码执行此操作：

$('#filtertype1').change(function(){
    var criteria1 = $(this).val();
    if(criteria1 == 'ALL'){
        $('.vermogen_gewicht tr').show();
        return;
    }
    $('.gewicht').each(function(i,option){
        if($(this).html() == criteria1 && $('.type').html() == criteria){
            $(this).parent().show();
        }else {
            $(this).parent().hide();
        }
    });
});

但是这不起作用，例如我选择类型1，它显示每行包含类型1并且它隐藏其他行。然后，当我在元素“gewicht”上选择2000时，它应该显示类型1和gewicht 2000的所有内容，但现在它只是隐藏了所有内容。

即使我改变了这个： if($(this).html() == criteria1 && $('.type').html() == criteria){ 到这个 if($(this).html() == criteria1 { 它将正常工作，如果我选择type = 1 gewicht = 2000然后它将正确显示并隐藏其他行，但当我将“gewicht”更改为2100时，它也将显示类型2，因此它将覆盖第一个排序。这可能不会发生。我该如何解决这个问题？

jQuery排序表列

0 个答案: