Jquery Session & Table Filtering
- by Bry4n
This is my Jquery
<script type="text/javascript">
$(function() {
var from = $.session("from");
var to = $.session("to");
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');
$th.hide();
$td.hide();
if (to == "Select" || from == "Select") {
// shortcut - nothing set, show everything
$th.add($td).show();
return;
}
var filterArray = new Array();
filterArray[0] = to;
filterArray[1] = from;
$.each(filterArray, function(i){
if (filterArray[i].toString() == "Select")
{
filterArray[i] = "";
}
});
$($th).each(function(){
if ($( this,":eq(0):contains('" + filterArray[0].toString() + "')") != null
&& $(this,":eq(1):contains('" + filterArray[1].toString() + "')") != null)
{
$(this).show();
}
});
$($td).each(function(){
if ($( this,":eq(0):contains('" + filterArray[0].toString() + "')") != null
&& $(this,":eq(1):contains('" + filterArray[1].toString() + "')") != null)
{
$(this).show();
}
});
});
</script>
This is my table
<table border="1" id="theTable">
<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="bluedata"height="20px" valign="top">6th & 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="6th & 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>
I have asked questions on here before and I have had success in converting textbox values to dropdown changes. However this is a bit different. I am using the sessions plugin (which works fine). On one page I have a set of normal drop downs, on submit you get taken to a separate page which runs the function above, however the rows/columns all show and they don't seem to filter at all.
