表行和列搜索筛选器
表行和列搜索筛选器
提问于 2014-08-31 03:32:57
我对Java Script或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
感谢您提供的任何帮助。如果任何人在我的网站上有帮助我改进的建议，请一定要让我知道，但如果你只是想笑，不要评论:)
回答 1
Stack Overflow用户
发布于 2014-08-31 03:48:12
使用Keyup替换您的更改函数。
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25586028
复制相关文章
相似问题
腾讯云开发者
