jQuery Table按列過濾

Question

我試圖以智能的方式過濾表格行（而不是僅僅是最終完成工作的大量代碼），而是一種相當枯燥的靈感。

我有5列在我的表中。在每個頂部有一個下拉或文本框用戶可以過濾表數據（基本上隱藏不適用的行）

有很多jQuery的表過濾插件，但沒有工作完全像這樣，那就是複雜的部分：|

Answer 1

這是一個基本的過濾器例如http://jsfiddle.net/urf6P/3/

它使用jQuery選擇：包含（「一些文本」）和：不是（：contains（'some text'））來決定每行應該被顯示還是隱藏。這可能會讓你朝着一個方向前進。

編輯，以包括來自的jsfiddle的HTML和JavaScript：

$(function() {  
    $('#filter1').change(function() { 
     $("#table td.col1:contains('" + $(this).val() + "')").parent().show(); 
     $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide(); 
    }); 

}); 

Answer 2

這可能不是最好的方法，但我不確定性能，但一個選項是標記每列（在每一行中）帶有以列標識符開頭的標識符，然後是唯一號碼就像記錄標識符一樣。

舉例來說，如果你有一列產品名，以及創紀錄的ID是763，我會做類似如下：

​​<table id="table1"> 
    <thead> 
     <tr> 
      <th>Artist</th> 
      <th>Album</th> 
      <th>Genre</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="artist-127">Red Hot Chili Peppers</td> 
      <td id="album-195">Californication</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-195">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-59">Santana</td> 
      <td id="album-198">Santana Live</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-198">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-120">Pink Floyd</td> 
      <td id="album-183">Dark Side Of The Moon</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-183">$8.99</td> 
     </tr> 
    </tbody> 
</table> 

然後，您可以使用jQuery過濾器的基礎上的開始id。

例如，如果您希望通過藝術家列過濾：

var regex = /Hot/; 
$('#table1').find('tbody').find('[id^=artist]').each(function() { 
    if (!regex.test(this.innerHTML)) { 
     this.parentNode.style.backgroundColor = '#ff0000'; 
    } 
}); 

Answer 3

步驟：1寫入HTML文件

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 

<table id="myTable"> 
    <tr class="header"> 
    <th style="width:60%;">Name</th> 
    <th style="width:40%;">Country</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Berglunds snabbkop</td> 
    <td>Sweden</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Koniglich Essen</td> 
    <td>Germany</td> 
    </tr> 
</table> 

步驟如下：2寫在以下.js文件

function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
}