Jquery Session & Table Filtering

Question

Это мой 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>

Это мой стол

 <table border="1" id="theTable">
    <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="bluedata"height="20px" valign="top">6th &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="6th &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>

Я задавал здесь вопросы раньше, и мне удалось преобразовать значения текстовых полей в выпадающие изменения. Однако это немного по-другому. Я использую плагин сессий (который работает нормально). На одной странице у меня есть набор нормальных выпадающих меню, при отправке вы попадаете на отдельную страницу, на которой запускается указанная выше функция, однако все строки / столбцы отображаются, и, похоже, они не фильтруются вообще.

Изменить: После просмотра кода я думаю, что это потому, что если элемент существует (! = Ноль), он просто показывает все TH или TR вместо выбранного.

Answer 1

Я понял это для тех, кто заинтересован.

     <script type="text/javascript">  
 $(function() {
 var from = $.session("from");
var to = $.session("to");
var $th = $('#theTable').find('th');
var $td = $('#theTable').find('td.bluedata,td.yellowdata');

if (to == "Select" || from == "Select") {
  // shortcut - nothing set, show everything
  $th.add($td).show();
  return;
}

 $th.add($td).hide();
$th.each(function(idx) {
      var notSelected = $(this).text();
      if ((notSelected.indexOf(to) != -1) || (notSelected.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();
      }
    });                      
 });
</script>