HTML Tables with jQuery Filtering

Posted by Bry4n on Stack Overflow See other posts from Stack Overflow or by Bry4n
Published on 2010-04-28T17:51:22Z Indexed on 2010/04/28 20:07 UTC
Read the original article Hit count: 273

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about tables