Javascript PHP変更時にテーブル行のリアルタイムカウントを行う方法

Question

私は入力フィールドにデータを入力すると、リアルタイムで検索したデータが表示されます。

私は既にフィルタリングしましたが、フィルタリングされる行の数をカウントするテキストを表示する機能をいくつか追加します。この

よう

は、これはあなたがあなたのコードの末尾にjQueryのセレクタを使用して、すべての/表示/非表示チャイルズをカウントすることができ、私のフィルタリングコード

function searchTable(inputVal) 
{ 
var table = $('#tblData'); 
table.find('tr').each(function(index, row) 
{ 
    var allCells = $(row).find('td'); 
    if(allCells.length) 
    { 
     var found = false; 
     allCells.each(function(index, td) 
     { 
      var regExp = new RegExp(inputVal, 'i'); 
      if(regExp.test($(td).text())) 
      { 
       found = true; 
       return false; 
      } 
     }); 
     if(found == true)$(row).show();else $(row).hide(); 
    } 
}); 
} 

Answer 1

です。

これらのセレクタはそれぞれ使用できます。 TR、 TR：隠された、 TR：目に見える

function searchTable(inputVal) { 
    var table = $('#tblData'); 
    table.find('tr').each(function(index, row) { 
     var allCells = $(row).find('td'); 
     if (allCells.length) { 
      var found = false; 
      allCells.each(function(index, td) { 
       var regExp = new RegExp(inputVal, 'i'); 
       if (regExp.test($(td).text())) { 
        found = true; 
        return false; 
       } 
      }); 
      if (found == true) $(row).show(); 
      else $(row).hide(); 
     } 
    }); 
    /* Use these values and print/append something to your HTML. */ 
    var allChilds = $('#tblData').find('tr').length; 
    var shownChilds = $('#tblData').find('tr:visible').length; 
    var hiddenChilds = $('#tblData').find('tr:hidden').length; 
    /* Use these values and print/append something to your HTML. */ 
    var countTemplate = "Your template, Total:"+allChilds; 
    $("#counts").html(countTemplate); 

} 

Answer 2

ここでは、あなたの関数のコードを変更しています：

searchTable = function(inputVal) { 
    showing = 0; 
    rows.each(function(index, row) { 
    var allCells = $(row).find('td'); 
    if (allCells.length) { 
     var found = false; 
     allCells.each(function(index, td) { 
     var regExp = new RegExp(inputVal, 'i'); 
     if (regExp.test($(td).text())) { 
      showing++; 
      found = true; 
      return false; 
     } 
     }); 
     if (found == true) $(row).show(); 
     else $(row).hide(); 
    } 
    $showingSpan.text(showing.toString()); 
    $totalSpan.text(total.toString()); 
    $filteredSpan.text((total - showing).toString()); 
    }); 
}; 

そしてここでは、濾過し、表示される行をカウントする実装される機能を持つworking fiddleです。使用しているjQueryのバージョンについては言及していないので、私は2.2.4バージョンと仮定しました。