자바 스크립트 변경시 테이블 행의 실시간 카운트를 만드는 방법

Question

필자는 입력 필드에 입력 할 때 실시간으로 검색 한 데이터를 표시하는 테이블을 가지고 있는데, 이는 텍스트 상자에 데이터를 입력 할 때 데이터를 필터링한다는 의미입니다.

나는 이미 필터링을했는데 필터링 된 행 수를 세는 텍스트를 보여주는 몇 가지 기능을 추가하고 싶습니다. 이

같은

이 내 필터링 코드

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

당신이 모두를 셀 수/코드의 끝에서의 jQuery 선택기를 사용하여 숨겨진/표시 차일.

이러한 선택기를 각각 사용할 수 있습니다. TR, TR : 숨겨진, TR :

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입니다 : 여기

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

볼 수는 함수의 코드를 수정합니다. 사용중인 jQuery 버전을 언급하지 않았으므로 2.2.4 버전을 사용했습니다.