我一直在为HTML表格进行jQuery过滤。过滤器可单独使用，但我无法让它们相互协作。
JSFiddle演示：https://jsfiddle.net/b8Lu55pL/1/
例如，如果您将客户付款过滤设置为＆＃34;客户第二次付款付款＆＃34; 在 之后将应用程序状态过滤设置为＆＃34; Deadend＆＃34;它仍然会显示1行，即使它应该没有显示。
我该如何解决这个问题？我查看了DataTables，但选择了反对它，以便它更加自定义等。
感谢。
供参考，JS是：
var clientfirst = $('th:contains("Client First Payment")').index();
var clientsecond = $('th:contains("Client Second Payment")').index();
var clientthird = $('th:contains("Client Third Payment")').index();
var franchisefirst = $('th:contains("Franchise First Payment")').index();
var franchisesecond = $('th:contains("Franchise Second Payment")').index();
var franchisethird = $('th:contains("Franchise Third Payment")').index();
var application_index = $('th:contains("Application Status")').index();
jQuery( "#clientfees" ).change(function() {
var clientfeesfilter = jQuery(this).val();
var index = null;
if(clientfeesfilter == "1st"){
index = clientfirst;
}else if(clientfeesfilter == "2nd"){
index = clientsecond;
}else if(clientfeesfilter == "3rd") {
index = clientthird;
}else if(clientfeesfilter == "none"){
show_non_paid("Client");
}else{
jQuery('#table > tbody > tr').each(function(){
jQuery(this).show();
});
}
if(index != null){
search_fees_by_index(index);
}
});
jQuery( "#franchisefees" ).change(function() {
var franchisefeesfilter = jQuery(this).val();
var index = null;
if(franchisefeesfilter == "1st"){
index = franchisefirst;
}else if(franchisefeesfilter == "2nd"){
index = franchisesecond;
}else if(franchisefeesfilter == "3rd") {
index = franchisethird;
}else if(franchisefeesfilter == "none"){
show_non_paid("Franchise");
}else{
jQuery('#table > tbody > tr').each(function(){
jQuery(this).show();
});
}
if(index != null){
search_fees_by_index(index);
}
});
function search_fees_by_index(index){
jQuery('#table > tbody > tr').each(function(){
var cell = getCell(index, jQuery(this).index(), "table");
if(cell.innerHTML == ""){
jQuery(this).hide();
}else{
jQuery(this).show();
}
});
}
function show_non_paid(type){
jQuery('#table > tbody > tr').each(function() {
if (type == "Client") {
var first = getCell(clientfirst, jQuery(this).index(), "table").innerHTML;
var second = getCell(clientsecond, jQuery(this).index(), "table").innerHTML;
var third = getCell(clientthird, jQuery(this).index(), "table").innerHTML;
}
if (type == "Franchise") {
var first = getCell(franchisefirst, jQuery(this).index(), "table").innerHTML;
var second = getCell(franchisesecond, jQuery(this).index(), "table").innerHTML;
var third = getCell(franchisethird, jQuery(this).index(), "table").innerHTML;
}
if(first == "" && second == "" && third == ""){
jQuery(this).show();
}else{
jQuery(this).hide();
}
});
}
function getCell(column, row, tableId) {
var table = document.getElementById(tableId);
return table.rows[row+1].cells[column];
}
jQuery( "#application_status_filter" ).change(function() {
var status_filter = jQuery(this).val();
if(status_filter == ""){
jQuery('#table > tbody > tr').each(function(){
jQuery(this).show();
});
}else {
jQuery('#table > tbody > tr').each(function () {
var cell = getCell(application_index, jQuery(this).index(), "table");
if (cell.innerHTML == status_filter) {
jQuery(this).show();
} else {
jQuery(this).hide();
}
});
}
});
HTML是：
<select id="clientfees">
<option value="">Client Payment Filtering</option>
<option value="none">Client No Payments Paid</option>
<option value="1st">Client 1st Payment Paid</option>
<option value="2nd">Client 2nd Payment Paid</option>
<option value="3rd">Client 3rd Payment Paid</option>
</select>
<select id="franchisefees">
<option value="">Franchise Payment Filtering</option>
<option value="none">Franchise No Payments Paid</option>
<option value="1st">Franchise 1st Payment Paid</option>
<option value="2nd">Franchise 2nd Payment Paid</option>
<option value="3rd">Franchise 3rd Payment Paid</option>
</select>
<select id="application_status_filter">
<option value="">Application Status Filtering</option>
<option value="Prospective Student">Prospective Student</option>
<option value="Deadend">Deadend</option>
<option value="Awaiting First Installment Fee">Awaiting First Installment Fee</option>
<option value="Submitted to University">Submitted to University</option>
<option value="Awaiting Second Installment Fee">Awaiting Second Installment Fee</option>
<option value="Accepted by University">Accepted by University</option>
<option value="Awaiting Third Installment Fee">Awaiting Third Installment Fee</option>
<option value="Rejected by University">Rejected by University</option>
<option value="Discussing Further Options">Discussing Further Options</option>
</select>
<br /><br />
<div class="table-responsive">
<table id="table" class="table table-bordered table-condensed table-hover table-striped">
<thead>
<tr>
<th>Name As Per Passport</th>
<th>Franchise ID</th>
<th>Nationality</th>
<th>Date of Birth</th>
<th>Address</th>
<th>Telephone Number</th>
<th>Mobile Number</th>
<th>Email</th>
<th>Fathers Name</th>
<th>Fathers Contact Number</th>
<th>Mothers Name</th>
<th>Mothers Contact Number</th>
<th>Course Applied For</th>
<th>University Choice</th>
<th>Date Application Submitted</th>
<th>Application Status</th>
<th>Last Contacted</th>
<th>Client First Payment Details</th>
<th>Client Second Payment Details</th>
<th>Client Third Payment Details</th>
<th>Franchise First Payment Details</th>
<th>Franchise Second Payment Details</th>
<th>Franchise Third Payment Details</th>
</tr>
<tbody>
<tr onclick='redirect_no_confirm("/client.php?id=1");' style="cursor:pointer;">
<td>Shivam Paw</td>
<td>KOL</td>
<td>United Kingdom</td>
<td>2000-09-12</td>
<td>XXXXX<br />
vgubh<br />
yugh<br />
United Kingdom
</td>
<td>12345678</td>
<td>12345678</td>
<td>2345@345ty.com</td>
<td>Pranay</td>
<td>23456y7ui</td>
<td>Kajal</td>
<td>3456789</td>
<td>Medicine</td>
<td>Varna</td>
<td>2016-08-07</td>
<td>Rejected by University</td>
<td>2016-08-09</td>
<td>Paid £1000 on 10th August 2016</td>
<td>Paid £800 on 11th August 2016</td>
<td></td>
<td>Paid £800 on 10th August 2016</td>
<td>Paid £700 on 11th August 2016</td>
<td></td>
</tr>
<tr onclick='redirect_no_confirm("/client.php?id=2");' style="cursor:pointer;">
<td>James</td>
<td>NAG</td>
<td>United Kingdom</td>
<td>1978-03-13</td>
<td>24 Scott Road<br />
Walsall<br />
WS5 3JN
</td>
<td>018378271082</td>
<td>1672832497</td>
<td>test@shivampaw.com</td>
<td>Bob</td>
<td>215673487</td>
<td>Carol</td>
<td>36284759884976</td>
<td>Dentistry</td>
<td>Varna</td>
<td>2016-08-10</td>
<td>Prospective Student</td>
<td>2016-08-07</td>
<td>Paid £100 today.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>