Question

我这里的代码哪个过滤表不起作用，然后我想要状态过滤器带复选框，我要做什么？，请帮助我！

＆＃13;

var $rows = $('tbody > tr'),
    $filters = $('#filter_table input');

$filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }),
        len = $i.length;

    if (len === 0) return $rows.show();

    var cls = '.' + $i.map(function () {
        return this.className
    }).get().join(',.');

    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function () {
            var content = this.textContent,
                inputVal = $i.filter('.' + this.className).val();

            return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

        }).length === len;
    }).show();
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="panel panel-default" id="filter_table">
  Input here to Search <br>
                      <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
                      <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
                      <input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
                      <input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
                      <input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
                      <input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
                      <input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
                      <input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>

<table border='1' class="table table-hover" id='products'>
            <thead>
                    <tr>
                      <th width="10px">Program
                      </th>
                      <th width="10px">Year
                      </th>
                      <th width="20px">Province
                      </th>
                      <th  width="20px">Municipality/LGU
                      </th>
                      <th  width="20px">Barangay
                      </th>
                      <th  width="30px">Project
                      </th>
                      <th  width="20px">Allocation
                      </th>
                      <th  width="20px">Status
                      </th>
                      <th  width="5px">PA%
                      </th>
                    </tr>
                </thead>
            <tbody>
            <tr>
                      <td width="10px">Program1
                      </td>
                      <td width="10px">2012
                      </td>
                      <td width="20px">Province1
                      </td>
                      <td width="20px">Municipality/LGU1
                      </td>
                      <td  width="20px">Barangay1
                      </td>
                      <td  width="30px">Project1
                      </td>
                      <td  width="20px">200000
                      </td>
                      <td  width="20px">completed
                      </td>
                      <td  width="5px">100%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program1
                      </td>
                      <td width="10px">2013
                      </td>
                      <td width="20px">Province2
                      </td>
                      <td width="20px">Municipality/LGU2
                      </td>
                      <td  width="20px">Barangay2
                      </td>
                      <td  width="30px">Project2
                      </td>
                      <td  width="20px">500000
                      </td>
                      <td  width="20px">ongoing
                      </td>
                      <td  width="5px">50%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program3
                      </td>
                      <td width="10px">2014
                      </td>
                      <td width="20px">Province3
                      </td>
                      <td width="20px">Municipality/LGU3
                      </td>
                      <td  width="20px">Barangay3
                      </td>
                      <td  width="30px">Project3
                      </td>
                      <td  width="20px">6000000
                      </td>
                      <td  width="20px">suspended
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program4
                      </td>
                      <td width="10px">2016
                      </td>
                      <td width="20px">Province4
                      </td>
                      <td width="20px">Municipality/LGU4
                      </td>
                      <td  width="20px">Barangay4
                      </td>
                      <td  width="30px">Project4
                      </td>
                      <td  width="20px">1000000
                      </td>
                      <td  width="20px">cancelled
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
            </tbody>
            </table>

＆＃13;

提前谢谢！

Answer 1

您在javaScript / Jquery方面所做的是正确的。您错过了将相关的类名添加到HTML中。我添加了year的类（我做了一个更改，有2012年的2条记录）和allocation，看起来很有效。

尝试使用year = 2012和allocation = 200000进行搜索

＆＃13;

var $rows = $('tbody > tr'),
    $filters = $('#filter_table input');

$filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }),
        len = $i.length;

    if (len === 0) return $rows.show();

    var cls = '.' + $i.map(function () {
        return this.className
    }).get().join(',.');

    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function () {
            var content = this.textContent,
                inputVal = $i.filter('.' + this.className).val();

            return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

        }).length === len;
    }).show();
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="panel panel-default" id="filter_table">
  Input here to Search <br>
                      <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
                      <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
                      <input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
                      <input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
                      <input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
                      <input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
                      <input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
                      <input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>

<table border='1' class="table table-hover" id='products'>
            <thead>
                    <tr>
                      <th width="10px">Program
                      </th>
                      <th width="10px">Year
                      </th>
                      <th width="20px">Province
                      </th>
                      <th  width="20px">Municipality/LGU
                      </th>
                      <th  width="20px">Barangay
                      </th>
                      <th  width="30px">Project
                      </th>
                      <th  width="20px">Allocation
                      </th>
                      <th  width="20px">Status
                      </th>
                      <th  width="5px">PA%
                      </th>
                    </tr>
                </thead>
            <tbody>
            <tr>
                      <td width="10px">Program1
                      </td>
                      <td width="10px" class='Year'>2012
                      </td>
                      <td width="20px">Province1
                      </td>
                      <td width="20px">Municipality/LGU1
                      </td>
                      <td  width="20px">Barangay1
                      </td>
                      <td  width="30px">Project1
                      </td>
                      <td  width="20px" class='Allocation'>200000
                      </td>
                      <td  width="20px">completed
                      </td>
                      <td  width="5px">100%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program1
                      </td>
                      <td width="10px" class='Year'>2012
                      </td>
                      <td width="20px">Province2
                      </td>
                      <td width="20px">Municipality/LGU2
                      </td>
                      <td  width="20px">Barangay2
                      </td>
                      <td  width="30px">Project2
                      </td>
                      <td  width="20px" class='Allocation'>500000
                      </td>
                      <td  width="20px">ongoing
                      </td>
                      <td  width="5px">50%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program3
                      </td>
                      <td width="10px" class='Year'>2014
                      </td>
                      <td width="20px">Province3
                      </td>
                      <td width="20px">Municipality/LGU3
                      </td>
                      <td  width="20px">Barangay3
                      </td>
                      <td  width="30px">Project3
                      </td>
                      <td  width="20px" class='Allocation'>6000000
                      </td>
                      <td  width="20px">suspended
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px">Program4
                      </td>
                      <td width="10px" class='Year'>2016
                      </td>
                      <td width="20px">Province4
                      </td>
                      <td width="20px">Municipality/LGU4
                      </td>
                      <td  width="20px">Barangay4
                      </td>
                      <td  width="30px">Project4
                      </td>
                      <td  width="20px" class='Allocation'>1000000
                      </td>
                      <td  width="20px">cancelled
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
            </tbody>
            </table>

＆＃13;

Answer 2

我已经更改了代码并为状态工作

小提琴：https://codepen.io/creativedev/pen/yEOPbz

$(document).ready(function(){
    var $rows = $('tbody > tr'),
    $filters = $('#filter_table input');
    $filters.on("keyup", function () {
        var $i = $filters.filter(function () {
            return $.trim(this.value).length > 0;
        });
        var len = $i.length;
        if (len === 0)
            return $rows.show();
        var cls = '.' + $i.map(function () {
        return this.className;
    }).get().join(',.');
        if(cls.indexOf(",") > -1){
            var array = cls.split(",");
            $.each(array,function(i){
                $rows.hide().filter(function () {
                return $('td', this).filter(function () {//console.log(this);
                    var content = this.textContent,
                        inputVal = $i.filter(array[i]).val();
                    return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

                }).length == len;
            }).show();
            });
        }else{
         $rows.hide().filter(function () {
            return $('td', this).filter(function () {
                var content = this.textContent,
                 inputVal = $i.filter(cls).val();
                          return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
            }).length === len;
        }).show();
        }
    });
});

每个columb过滤表

2 个答案: