表行和列的搜索过滤
问题描述:
我不知道很多关于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 $$ITEM_APPR10<br> $$ITEM_PICTURE </strong></td>
<td class="lgt" style="height:120px;"><strong>$$ITEM_ORIGINALTITLE </strong></td>
<td class="lgt" style="height:120px;">$$ITEM_TRANSLATEDTITLE </td>
<td class="lgt" style="height:120px;">$$ITEM_LANGUAGES </td>
<td class="lgt" style="height:120px;">$$ITEM_LENGTH </td>
<td class="lgt" style="height:120px;"> $$ITEM_YEAR </td>
<td class="lgt" style="height:120px;">$$ITEM_RESOLUTION </td>
<td class="lgt" style="height:120px;">$$ITEM_RATING </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 </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 </strong><br>$$ITEM_ACTORS<br><br></td>
</tr>
<tr>
<td colspan="10"class="lgt"><strong><br>$$LABEL_DESCRIPTION </strong><br>$$ITEM_DESCRIPTIONS<br><br></td>
</tr>
<tr>
<td colspan="10"class="lgt"><strong><br>$$LABEL_COMMENTS </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
感谢您的高级任何帮助提供。如果有人有建议来帮助我改进我的网站,请让我知道,但如果你想笑,不要评论:)
答
用键盘替换你的改变功能。
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});
我已经试过这个代码,我刚才好像有问题,如,这一切消失,而不是一切,但什么类型的。此外它是区分大小写的,并且必须是完整的单词,这非常方便..我有一种感觉,我可能需要使用DIV使它真正起作用,但我不知道如何使用它们。这是对我来说是一个非常艰难的挑战 – Trent 2014-08-31 18:19:31