tableaux HTML avec jQuery Filtrage

Question

Disons que j'ai ...

<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> 

maintenant en fonction de ce que les données sont tapé dans les champs de saisie, j'ai besoin du tableau SDT/tds pour afficher ou masquer. Donc si je tape 63rd dans la case "to", et genévrier dans la case "from", j'ai seulement besoin de ces deux trs/tds qui apparaissent dans cet ordre et aucun des autres.

Answer 1

Je mets ensemble un peu demo de ce bloc de code, mais il fonctionne pour ce cas précis:

$(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

Sans changer votre code, vous pouvez essayer cela. Il va cacher les colonnes qui n'ont pas de correspondance mais ne changeront pas leur ordre. Il ne se cache également que si deux ou plusieurs correspondances de colonnes sont trouvées. En vérité, vous ne devriez publier des choses que lorsque vous avez besoin d'aide pour résoudre un problème que vous avez déjà tenté, et non pour que quelqu'un d'autre fasse le travail pour vous.

<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>