在筛选表数据中选择多个值或数据

Question

我这里有一个示例数据表，它正在处理过滤数据。我想要的是在状态字段中选择多个数据值。示例：我想打印已完成和正在进行并暂停的数据，那么这些数据应该是唯一要打印的数据，有可能吗？

＆＃13;

＆＃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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default" id="filter_table">
                      <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" list="listprog" name="program" />
                      <button onclick="document.getElementById('Program').value = ''">X</button>
                      <datalist id="listprog">
                        <option value="Program1">
                        <option value="Program2">
                        <option value="Program3">
                        <option value="Program4">
                      </datalist>
                      <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" list="listyear" name="year" />
                      <button onclick="document.getElementById('Year').value = ''">X</button>
                      <datalist id="listyear">
                        <option value="2010">
                        <option value="2011">
                        <option value="2012">
                        <option value="2013">
                        <option value="2014">
                        <option value="2015">
                        <option value="2016">
                        <option value="2017">
                        <option value="2018">
                      </datalist>
                      <input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" list="liststatus" name="stat" />
                      <button onclick="document.getElementById('Status').value = ''">X</button>
                      <datalist id="liststatus">
                        <option value="completed">
                        <option value="ongoing">
                        <option value="suspended">
                        <option value="cancelled">
                      </datalist>
</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" class='Program'>Program1
                      </td>
                      <td width="10px" class='Year'>2012
                      </td>
                      <td width="20px" class='Province'>Province1
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU1
                      </td>
                      <td  width="20px" class='Barangay'>Barangay1
                      </td>
                      <td  width="30px" class='Project'>Project1
                      </td>
                      <td  width="20px" class='Allocation'>200000
                      </td>
                      <td  width="20px" class='Status'>completed
                      </td>
                      <td  width="5px">100%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program1
                      </td>
                      <td width="10px" class='Year'>2013
                      </td>
                      <td width="20px" class='Province'>Province2
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU2
                      </td>
                      <td  width="20px" class='Barangay'>Barangay2
                      </td>
                      <td  width="30px" class='Project'>Project2
                      </td>
                      <td  width="20px" class='Allocation'>500000
                      </td>
                      <td  width="20px" class='Status'>ongoing
                      </td>
                      <td  width="5px">50%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program3
                      </td>
                      <td width="10px" class='Year'>2014
                      </td>
                      <td width="20px" class='Province'>Province3
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU3
                      </td>
                      <td  width="20px" class='Barangay'>Barangay3
                      </td>
                      <td  width="30px" class='Project'>Project3
                      </td>
                      <td  width="20px" class='Allocation'>6000000
                      </td>
                      <td  width="20px" class='Status'>suspended
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program4
                      </td>
                      <td width="10px" class='Year'>2016
                      </td>
                      <td width="20px" class='Province'>Province4
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU4
                      </td>
                      <td  width="20px" class='Barangay'>Barangay4
                      </td>
                      <td  width="30px" class='Project'>Project4
                      </td>
                      <td  width="20px" class='Allocation'>1000000
                      </td>
                      <td  width="20px" class='Status'>cancelled
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
            </tbody>
            </table>

＆＃13;

＆＃13;

＆＃13;