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


html代码:

   


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()                                          #满足条件就显示出来

        }

你可能感兴趣的:(web前端)