HTML Tables with jQuery Filtering

Question

Let's say I have...

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

Now depending upon what data is typed into the textboxes, I need the table trs/tds to show or hide.

So if I type in 63rd in "to" box, and juniper in the "from" box, I need only those two trs/tds showing in that order and none of the others.

Answer 1

I put together a little demo of this code block, but it works for this specific case:

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

Without changing your code, you might try this. It will hide columns that do not have a match but will not change their order. It also only does hiding if two or more column matches are found. In truth you should only post things where you need help solving a problem you have already attempted, not for someone else to do the work for you.

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