Jquery表格過濾器

Question

我想通過使用jquery點擊表A中的字段來過濾來自表B的表格結果。表B包含來自特定數據庫的所有數據，表A僅包含其中一個字段。例如，

Table A 
MFG_Name |Count 
Dell | 15 
Gateway|10

點擊戴爾將過濾從表B中的結果，其中MFG_Name =戴爾，並告訴他們下面的表A如下：

Table B 
Inventory_No | MFG_Name | Model_Name | Description 
0001   | Dell  |Inspiron |Desktop 
0002   | Dell  |Optiplex |Desktop

我怎麼能去這樣做？我已經看過使用插件過濾表，但我的目標是不必打印表B，直到我過濾它，因爲它可能包含100000 +庫存數量。

Answer 1

您可以設置在表A中的點擊事件，提取您點擊的文本，然後你在表B上此jQuery插件：http://jsfiddle.net/VjdLV/2/

Answer 2

： http://plugins.jquery.com/project/uiTableFilter

編輯 使用tableFilter寫了一個小演示

你可以嘗試這樣的代碼：

$("table.a td.mfg_name").click(function(){ 

    var mfg_name = $(this).text(); 

    $("table.b tr").each(function(){ 

     if($(this).find("td.mfg_name").text().indexOf(mfg_name) != -1){ 
      $(this).show(); 
     } 
     else{ 
      $(this).hide(); 
     } 
    }); 
}); 

Answer 3

鑑於加價類似以下內容：

<table id="manufacturers"> 
    <thead> 
     <tr> 
      <th>Manufacturer name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Dell</td> 
     </tr> 
     <tr> 
      <td>Packard Bell</td> 
     </tr> 
    </tbody> 
</table> 

<table id="computers"> 
    <thead> 
     <tr> 
      <th>Manufacturer name</th> 
      <th>Model number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Dell</td> 
      <td>Vostro</td> 
     </tr> 
     <tr> 
      <td>Dell</td> 
      <td>E1405</td> 
     </tr> 
     <tr> 
      <td>Dell</td> 
      <td>Inspiron 1525</td> 
     </tr> 
     <tr> 
      <td>Packard Bell</td> 
      <td>F7305</td> 
     </tr> 
     <tr> 
      <td>Packard Bell</td> 
      <td>Easy Note A7</td> 
     </tr> 
     <tr> 
      <td>Hewlett Packard</td> 
      <td>Touchpad</td> 
     </tr> 
     <tr> 
      <td>Hewlett Packard</td> 
      <td>Pavilion Elite</td> 
     </tr> 
    </tbody> 
</table> 

以下jQuery的似乎工作：

$('#manufacturers td').click(
    function(){ 
     var m = $(this).text(); 
     $('#computers tr') 
      .hide() 
      .filter(
       function(){ 
        if ($(this).find('td:first-child').text() == m){ 
         return this; 
        } 
       }) 
      .show(); 
    }); 

JS Fiddle。