使用jQuery过滤HTML表格

Question

比方说，我有...

<form action="#"> 
    <fieldset> 
     to: 
     <input type="text" name="search" value="" id="to" /> 
     from: 
     <input type="text" name="search" value="" id="from" /> 
    </fieldset> 
</form> 
<table border="1"> 
    <tr class="headers"> 
     <th class="bluedata"height="20px" valign="top">63rd St. &amp; Malvern Av. Loop<BR/></th> 
     <th class="yellowdata"height="20px" valign="top">52nd St. &amp; Lansdowne Av.<BR/></th> 
     <th class="bluedata"height="20px" valign="top">Lancaster &amp; Girard Avs<BR/></th> 
     <th class="yellowdata"height="20px" valign="top">40th St. &amp; Lancaster Av.<BR/></th> 
     <th class="bluedata"height="20px" valign="top">36th &amp; Market Sts<BR/></th> 
     <th class="yellowdata"height="20px" valign="top">Juniper Station<BR/></th> 
    </tr> 
    <tr> 
     <td class="bluedata"height="20px" title="63rd St. &amp; Malvern Av. Loop"> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
     <td class="yellowdata"height="20px" title="52nd St. &amp; Lansdowne Av."> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
     <td class="bluedata"height="20px" title="Lancaster &amp; Girard Avs"> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
     <td class="yellowdata"height="20px" title="40th St. &amp; Lancaster Av."> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
     <td class="bluedata"height="20px" title="36th &amp; Market Sts"> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
     <td class="bluedata"height="20px" title="Juniper Station"> 
      <table width="100%"> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:17am</td> 
       </tr> 
       <tr> 
        <td>12:47am</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

现在取决于什么样的数据输入到文本框，我需要的表TRS/TDS显示或隐藏。

因此，如果我在“to”框中输入63rd，并在“from”框中输入juniper，则只需按照该顺序显示两个trs/tds，而不需要显示其他顺序。

Answer 1

我放在一起这个代码块的一个小demo，但它工作在这种特殊情况下：

$(function() { 
    $('#to,#from').bind('keyup change', function() { 
    var to = $('#to').val().toLowerCase(); 
    var from = $('#from').val().toLowerCase(); 
    var $th = $('#theTable').find('th'); 
    // had to add the classes here to not grab the "td" inside those tables 
    var $td = $('#theTable').find('td.bluedata,td.yellowdata'); 

    if (to.length == 0 || from.length == 0) { 
     // shortcut - nothing set, show everything 
     $th.add($td).show(); 
     return; 
    } 

    $th.add($td).hide(); 
    $th.each(function(idx) { 
     var txt = $(this).text().toLowerCase(); 
     if ((txt.indexOf(to) != -1) || (txt.indexOf(from) != -1)) { 
     // the text had the to or the from in it - so show this tr 
     $(this).show(); 
     // and show its corresponding td 
     $td.eq(idx).show(); 
     } 
    }); 

    }); 
}); 

Answer 2

不改变你的代码，你可以试试这个。它会隐藏没有匹配但不会更改顺序的列。如果找到两个或更多列匹配，它也只会隐藏。事实上，你只应该在你需要帮助的地方发布解决你已经尝试过的问题的东西，而不是别人为你做的工作。

<script type="text/javascript">/* <![CDATA[ */ 
function tableFilter() 
{ // show/hide table data based in search filters 
    var loop=0, cnt=0, idx=[], obj, txt1=$("#to").val().toLowerCase(), txt2=$("#from").val().toLowerCase(); 
    $("table:eq(0) tr.headers th").each(function(){ // for each header description 
     if ($(this).parents("table").length < 2) { 
      if (txt1 != "" && $(this).html().toLowerCase().indexOf(txt1) != -1) { cnt++; idx[loop] = true; } 
      if (txt2 != "" && $(this).html().toLowerCase().indexOf(txt2) != -1) { cnt++; idx[loop] = true; } 
      loop++; 
     } 
    }); 
    if (txt1 != "" && txt2 != "" && cnt > 1) { // filter display of cells if 2 or more matches found 
     loop = 0; 
     $("table:eq(0) tr.headers th").each(function(){ 
      if ($(this).parents("table").length < 2) { 
       $(this).css("display", (idx[loop]==true)? "" : "none"); // hide/show cell 
       loop++; 
      } 
     }); 
     loop = 0; 
     $("table:eq(0) td").each(function(){ 
      if ($(this).parents("table").length < 2) { 
       $(this).css("display", (idx[loop]==true)? "" : "none"); // hide/show cell 
       loop++; 
      } 
     }); 
    } 
    else { $("table:eq(0) th, table:eq(0) td").css("display", ""); } // show all cells 
} 
$(document).ready(function(){ 
    $("#to, #from").keyup(tableFilter); 
}); 
/* ]]> */</script>