JQuery遍历表格按条件选择框筛选显示隐藏表格

最新推荐文章于 2025-05-20 21:02:23 发布

三山绕四水

最新推荐文章于 2025-05-20 21:02:23 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jquery html 遍历

本文链接：https://blog.youkuaiyun.com/Q_QTowerQ_Q/article/details/78373943

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JQuery实现表单动态筛选的方法。通过两个下拉菜单选择不同的筛选条件，可以实现实时更新表格内容的功能。文章详细展示了如何通过JQuery监听选择变化，并根据所选值过滤表格中的行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<select id="ecc" class="form-control right margin-5" style="width:135px;">
        <option value="互斥(ALL)">互斥(ALL)</option>
        <option value="不满足互斥">不满足互斥</option>
    </select>

    <select id="pair" class="form-control right margin-5 " style="width:135px;">
        <option value="pair互斥(ALL)">pair互斥(ALL)</option>
        <option value="不满足pair互斥">不满足pair互斥</option>
    </select>

JQuery代码：

$('#pair').change(function () {
frushtable()

})

$('#ecc').change(function () {
frushtable()

})

function frushtable() {
      var pair = $('#pair').val()
      var ecc = $('#ecc').val()
       $("table tbody tr").stop().hide()
           .filter(function (index, element) {                                  #filter函数遍历表格，
              //筛选pair互斥
             if (pair == 'pair互斥(ALL)') {
                pair_flag = true

                } else {
               var pair_span = $(this).find('td:eq(4)').find('span')[0].className         #td:eq(4)找到表格第五列的sapn标签下的class的值
                  if( pair_span.indexOf('label label-danger') != -1){                                  #srtring.indexOf(‘str’)：遍历查找string中是否有str，没有返回-1
                     pair_flag = true
                  }
                 else {
                     pair_flag = false

}

                    }
               //筛选机房互斥
               if (ecc == '机房互斥(ALL)') {
                  ecc_flag = true

                 } else {
                   var ecc_span = $(this).find('td:eq(5)').find('span')[0].className
                   if( ecc_span.indexOf('label label-danger') != -1){
                      ecc_flag = true
                    }
                    else {
                       ecc_flag = false

}

return pair_flag && ecc_flag
}).show() #满足条件就显示出来

}