Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript HTML jQuery表过滤_Javascript_Jquery_Html_Html Table - Fatal编程技术网

Javascript HTML jQuery表过滤

Javascript HTML jQuery表过滤,javascript,jquery,html,html-table,Javascript,Jquery,Html,Html Table,我一直在为HTML表进行jQuery筛选。过滤器单独工作,但我无法让它们相互工作 JSFIDLE演示: 例如,如果在将应用程序状态筛选设置为“Deadend”后,将客户付款筛选设置为“客户第二次付款已支付”,则即使该行不显示,它仍将显示1行 我怎样才能解决这个问题?我查看了数据表,但选择了与之相反的数据表,以便它更具定制性等 谢谢 作为参考,JS是: var clientfirst = $('th:contains("Client First Payment")').index(); var c

我一直在为HTML表进行jQuery筛选。过滤器单独工作,但我无法让它们相互工作

JSFIDLE演示:

例如,如果在将应用程序状态筛选设置为“Deadend”后,将客户付款筛选设置为“客户第二次付款已支付”,则即使该行不显示,它仍将显示1行

我怎样才能解决这个问题?我查看了数据表,但选择了与之相反的数据表,以便它更具定制性等

谢谢

作为参考,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 &pound;1000 on 10th August 2016</td>
            <td>Paid &pound;800 on 11th August 2016</td>
            <td></td>
            <td>Paid &pound;800 on 10th August 2016</td>
            <td>Paid &pound;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>

客户付款过滤
客户未付款
客户首次付款已支付
客户第二次付款已支付
客户第三次付款已支付
特许权支付过滤
特许经营权未付款
特许权首次付款已支付
已支付特许经营权第二次付款
特许经营权第三次付款已支付
应用程序状态筛选
准学生
死角
等待第一期付款
上大学
等待第二期付款
大学录取
等待第三期付款
被大学拒绝
讨论进一步的选择


护照上的姓名 特许经营ID 国籍 出生日期 地址 电话号码 手机号码 电子邮件 父亲的名字 父亲联系电话 母亲的名字 母亲联系电话 申请的课程 大学选择 提交申请的日期 应用状况 最后联系 客户首次付款详情 客户第二次付款详情 客户第三次付款详情 特许权首次付款详情 专营权第二次付款详情 专营权第三次付款详情 湿婆爪 科尔 大不列颠联合王国 2000-09-12 XXXXX
vgubh
是的
大不列颠联合王国 12345678 12345678 2345@345ty.com 呼吸 23456y7ui 卡久 3456789 药 瓦尔纳 2016-08-07 被大学拒绝 2016-08-09 已付英镑;2016年8月10日上午10:00 已付英镑;2016年8月11日上午8时00分 已付英镑;2016年8月10日800 已付英镑;2016年8月11日第700页 詹姆斯 唠叨 大不列颠联合王国 1978-03-13 斯科特路24号
沃尔索尔
WS5 3JN 018378271082 1672832497 test@shivampaw.com 上下快速移动 215673487 颂歌 36284759884976 牙科 瓦尔纳 2016-08-10 准学生 2016-08-07 今天付了100英镑。
对此有什么想法吗?仍然需要帮助。有什么想法吗?仍然需要帮助。