表多列過濾器

Question

我想爲我的一個表寫一個多列過濾器。我現在不想用插件來做。我發現，它的工作，但只有1列。你有任何想法如何修改它的所有列？

$(".filter").keyup(function(e) { // filter is class 
    if (e.keyCode == 13) { 
     var indexColumn = $(this).attr('data-id'); 
     console.log('INDEX ' + indexColumn); 
     console.log("value=%o", this.value); 
     //split the current value of searchInput 
     var data = this.value.split(" "); 
     //create a jquery object of the rows 
     var jo = $("#fbody").find("tr") 
      //hide all the rows 
     if (this.value == "") { 
      jo.show(); 
      return; 
     } 
     jo.hide(); 
     //Recusively filter the jquery object to get results. 
     jo.filter(function(i, v) { 
      var $t = $(this).children(":eq(" + indexColumn + ")"); 
      for (var d = 0; d < data.length; ++d) { 
       if ($t.is(":contains('" + data[d] + "')")) { 

        // console.log(data[d]); 
        return true; 
       } 
      } 
      return false; 
     }).show(); //show the rows that match. 
     updateTotals(); 
    } 
}); 

Fiddle demo

Answer 1

您可以在此情況下，使用jQuery的each()方法。

$(".filter").each(function() { 
    $(this).keyup(function(e) { 
     if (e.keyCode == 13) { 
      var indexColumn = $(this).attr('data-id'); 
      console.log('INDEX ' + indexColumn); 
      console.log("value=%o", this.value); 
      //split the current value of searchInput 
      var data = this.value.split(" "); 
      //create a jquery object of the rows 
      var jo = $("#fbody").find("tr") 
       //hide all the rows 
      if (this.value == "") { 
       jo.show(); 
       return; 
      } 
      jo.hide(); 
      //Recusively filter the jquery object to get results. 
      jo.filter(function(i, v) { 
       var $t = $(this).children(":eq(" + indexColumn + ")"); 
       for (var d = 0; d < data.length; ++d) { 
        if ($t.is(":contains('" + data[d] + "')")) { 

         // console.log(data[d]); 
         return true; 
        } 
       } 
       return false; 
      }).show(); //show the rows that match. 
     } 
    }) 
}); 

JS Demo