錶行和列的搜索過濾

Question

我不知道很多關於Java腳本或Jquery的，但我試圖找出我怎麼能得到一個搜索篩選器，使用此代碼工作..

 <div id="table-container"> 
<table id="maintable" border="1" cellspacing="0" cellpadding="1"> 
<thead> 
    <tr><!-- FIX: Needed to wrap it in a row --> 
    <th class="blk" nowrap>Number</th> 
    <th class="blk" nowrap>Original Title</th> 
    <th class="blk" nowrap>Translated Title</th> 
    <th class="blk" nowrap>Languages</th> 
    <th width="10%" class="blk" nowrap>Movie Length</th> 
    <th width="10%" class="blk" nowrap>Year</th> 
    <th width="10%" class="blk" nowrap>Resolution</th> 
    <th width="10%" class="blk" nowrap>Rating</th> 
    <th class="blk" nowrap>IMDB MOVIE URL</th> 
    <th class="blk" nowrap>$$LABEL_CATEGORY</th> 
    </tr> 
</thead> 
$$ITEM_BEGIN 
<tr><!-- FIX: Needed to wrap it in a row --> 
<td rowspan="2" class="lgt" style="height:120px;"><strong>$$ITEM_NUMBER&nbsp;$$ITEM_APPR10<br>&nbsp;&nbsp;$$ITEM_PICTURE&nbsp;&nbsp;</strong></td> 
<td class="lgt" style="height:120px;"><strong>$$ITEM_ORIGINALTITLE&nbsp;</strong></td> 
<td class="lgt" style="height:120px;">$$ITEM_TRANSLATEDTITLE&nbsp;</td> 
<td class="lgt" style="height:120px;">$$ITEM_LANGUAGES&nbsp;</td> 
<td class="lgt" style="height:120px;">$$ITEM_LENGTH&nbsp;</td> 
<td class="lgt" style="height:120px;">&nbsp;$$ITEM_YEAR&nbsp;</td> 
<td class="lgt" style="height:120px;">$$ITEM_RESOLUTION&nbsp;</td> 
<td class="lgt" style="height:120px;">$$ITEM_RATING&nbsp;</td> 
<td class="lgt" style="height:120px;"><a href="$$ITEM_URL" target="_blank">$$ITEM_ORIGINALTITLE</a></td> 
<td class="lgt" style="height:120px;">$$ITEM_CATEGORY&nbsp;</td> 
<tr> 
<td height="14%" colspan="9" class="myButton">CLICK ME FOR MORE INFORMATION OR CLICK ME FOR LESS</td> 
</tr> 
<tbody class="myContent" style="display:none;"> 
<tr> 
<td colspan="10"class="lgt"><strong><br>$$LABEL_ACTORS&nbsp;</strong><br>$$ITEM_ACTORS<br><br></td> 
</tr> 
<tr> 
<td colspan="10"class="lgt"><strong><br>$$LABEL_DESCRIPTION&nbsp;</strong><br>$$ITEM_DESCRIPTIONS<br><br></td> 
</tr> 
<tr> 
<td colspan="10"class="lgt"><strong><br>$$LABEL_COMMENTS&nbsp;</strong><br>$$ITEM_COMMENTS<br></td> 
</tr class="data"><!-- FIX: close row --> 
</tbody> 
</tr> 
<tr> 
<td colspan="20" class="blk"></td> 
</tr> 
$$ITEM_END 
</table> 

這鏈接http://jsfiddle.net/urf6P/3/是我相信可以工作的一個例子，但我不確定它是否會按照我的意願去做。 上面的代碼是一個模板使用它的電影目錄程序，並生成到HTML。

嘗試任何過濾器，當我的問題是當它到達這一部分：

</tr> 
<tr> 
<td height="14%" colspan="9" class="myButton">CLICK ME FOR MORE INFORMATION OR CLICK ME FOR LESS</td> 

的停止它，不會使其他消失。

這個鏈接www.vijayjoshi.org/examples/filterTable.html是我嘗試過的另一個，但我仍然遇到了整個部分的問題。 如果「myButton」出現在非特定名稱的其他電影上，會發生什麼情況。

對不起，泄密，只是想確保我碰基地的一切，試圖表明其他代碼，我不知道這是否會工作..

這是一個測試頁面我已經被玩弄與它得到它的工作..我知道我的HTML沒有組織或偉大，但我承認我不是專業的。http://www.mrtrent.altervista.org/Movie_List.html

感謝您的高級任何幫助提供。如果有人有建議來幫助我改進我的網站，請讓我知道，但如果你想笑，不要評論:)

Answer 1

用鍵盤替換你的改變功能。

$(function() {  
    $('#filter1').change(function() { 
     $("#table td.col1:contains('" + $(this).val() + "')").parent().show(); 
     $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide(); 
    }); 

}); 

DEMO