Question

我对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&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

用Keyup替换您的更改功能。

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

});

DEMO

表行＆amp;列搜索过滤器

1 个答案: