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
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. & Malvern Av. Loop<BR/></th>
<th class="yellowdata"height="20px" valign="top">52nd St. & Lansdowne Av.<BR/></th>
<th class="bluedata"height="20px" valign="top">Lancaster & Girard Avs<BR/></th>
<th class="yellowdata"height="20px" valign="top">40th St. & Lancaster Av.<BR/></th>
<th class="bluedata"height="20px" valign="top">36th & 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. & 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. & 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 & 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. & 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 & 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