Question

我创建了一个带有列过滤器的表和一个用于切换该表行的按钮“test” 的 HTML

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.tablesorter.combined.js"></script>
<script src="js/widget-columnSelector.js"></script>
<script src="js/widget-sort2Hash.js"></script>

<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
        <thead>
        <tr>
            <th class="filter-false">S.no</th>
            <th class="filter-false">name</th>
            <th class="filter-select" data-placeholder="Select All">Department</th>
            <th class="filter-false">Age</th>
            <th class="filter-false">Section</th>
        </tr>
        </thead>
        <tbody>
<tr class="invalid">
    <td>1</td>
    <td>yyy</td>
    <td>CSE</td>
    <td>17</td>
    <td>A</td>
<tr>
<tr>
    <td>1</td>
    <td>zzz</td>
    <td>ECE</td>
    <td>17</td>
    <td>A</td>
<tr>
<tr class="invalid">
..
    </tr>     
...
</div>

JS

$(document).ready(function () {
    $('#test').on('click', function () {
        var name = $(this).attr('className');

        if ($(this).val() == 'Hide' ) {
            $('#testtable tr.' + name).hide();
            $(this).val('Show');
        } else{
            $('#testtable tr.' + name).show();
            $(this).val('Hide');
        }

    });

});

使用上面的JS代码，我可以切换类名为“invalid”的行。但是当我尝试在Department列中添加列过滤器时，切换功能无法正常工作。

1.如果我通过从下拉列表中选择任何选项并单击隐藏按钮来过滤列，则具有“无效”的已过滤行正在隐藏...但如果再次按下则显示它显示所有“无效”行不仅过滤。

2.如果我通过选择任何选项并按下隐藏来过滤列，现在会隐藏行，如果我选择“全选”，则显示完整的表格。

我甚至不知道如何解决上述情况。请建议我这个。

jquery- table列过滤器和行切换在一起不能正常工作

0 个答案: