表行和列的搜索过滤

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