Javascript 表行&；列搜索筛选器

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

数
原名
译名
语言文字
电影长度
年
决议
评级
IMDB电影URL
$$LABEL\u类别
$$ITEM\u开始
$$ITEM\u编号$$ITEM\u大约10
$$ITEM\u图片
$$ITEM_originalttle
$$ITEM\u翻译标题
$$ITEM\u语言
$$ITEM\u长度
$$ITEM\u年度
$$ITEM\u分辨率
$$ITEM\u评级
$$ITEM\u类别
单击我了解更多信息，或单击我了解更少信息

$$LABEL\u ACTORS
$$ITEM\u ACTORS



$$LABEL\u DESCRIPTION
$$ITEM\u DESCRIPTION



$$LABEL\u评论
$$ITEM\u评论

$$ITEM\u结束

这个链接是一个我认为可以工作的例子，但我不确定它是否能完全满足我的需求。 上面的代码是一个模板，用于制作电影目录程序，并生成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不是很有条理，也不是很好，但我承认我并不专业

---

提前感谢您提供的任何帮助。如果有人建议我改进我的网站，请务必让我知道，但如果你只是想笑，不要评论：）

用Keyup替换你的更改功能

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

});

---

我尝试过这段代码，但似乎遇到了一些问题，例如，所有代码都消失了，而不是所有代码，除了键入的内容。而且它是区分大小写的，必须是完整的单词，这非常方便。。我有一种感觉，我可能需要使用div来使它真正起作用，但我也不知道如何使用它们。。这对我来说是一个相当艰巨的挑战。。