Javascript PHP如何在更改時實現表格行的實時計數

我有一張表格，當我在輸入字段上鍵入時，它會顯示像我實時搜索的數據，我的意思是當我在文本框中鍵入時過濾數據。Javascript PHP如何在更改時實現表格行的實時計數

我已經做了過濾，但我想添加一些功能，顯示一個文本，計算有多少行被過濾。

這樣

enter image description here

這是我的過濾代碼

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(); 
    } 
}); 
}

來源

2016-08-01 Raffy T Lawrence

當您單擊[添加新條件]按鈕。你可以在這裏調用函數searchTable並計算行數。並且我認爲找到[tr]標籤已足夠 –

您不知道在處理ajax調用 – RiggsFolly

先生的結果時有多少行正在返回，但添加新條件按鈕和我的搜索輸入類型不同，當我鍵入搜索輸入字段，它會自動過濾，該按鈕是爲我的模態顯示數據，但我也想在下面顯示一條消息，通過篩選顯示多少數據， –

你可以指望所有/使用jQuery選擇在你的代碼的末尾隱藏/顯示孩子的。

您可以分別使用這些選擇器; 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); 

}

來源

2016-08-01 12:47:33

先生，但它複製時，我追加，如何刪除先前附加在keyup上 –

你可以更新元素的innerhtml？ –

我已更新我的代碼。將'

'添加到您的HTML並在每個'searchTable（）'函數調用中更新它的內容。 –

這裏的修改代碼的功能：

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版本。

來源

2016-08-01 13:20:46 Tomaj

Javascript PHP如何在更改時實現表格行的實時計數

回答

相關問題