2010-05-03 2 views
0

이 내 JQuery와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> 

입니다 내가 전에 여기에 질문을하고 나는 변화를 드롭 다운 할 텍스트 상자의 값을 변환에 성공을 거두었습니다. 그러나 이것은 약간 다릅니다. 세션 플러그인을 사용하고 있는데 (잘 작동합니다). 한 페이지에 정상적인 드롭 다운 세트가 있습니다. 제출시 위의 함수를 실행하는 별도의 페이지로 이동하지만 행/열 모두가 표시되며 전혀 필터링하지 않는 것 같습니다.

편집 : 코드를 살펴본 후 항목이 존재하면 (! = null) 선택한 THow 대신 모든 TH 또는 TR을 표시하기 때문에 코드를 본 후에 생각합니다.

답변

0

관심있는 사람들을 위해 알아 냈습니다.

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