Javascript 根据在搜索表单中键入的内容隐藏和显示表行

我得到了一个在tbody下有多个tr的表，在一个带有属性的表下

function searchEnter() {
    var content = $('#search').val();
    $('#search').change(function() {
        if ($('#search').text() != content) {
            content = $('#search').val();
            $('tbody', '#attribute').each(function() {
                $(this).find('tr').each(function() {
                    if ($('tbody>tr>h4:contains(' + content + ')')) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                })
            })
        }
    });
}

我想根据在搜索框中键入的内容更改表的内容。虽然我也不确定如何使用Twitter引导来构造搜索框的html，或者jquery/javascript是否正确。也不确定该操作应该是什么，但我希望它引用函数，而不是PHP文件

<form class="well form-search fill pull-right" action="">
      <input id="search" type="text" class="input-medium search-query"  />
      <button type="submit" class="btn" onclick="searchEnter">Search</button>
    </form>

---

您可以仅对行使用选择器，这可能是一种更简洁的启动方式。因此，在您的代码中，在确定输入了新文本后，用如下内容开始一个块：

$('tr').each(function(index){

它将选择您的所有行。如果TR元素不止存在于该表中，那么可以使用类（如“table\u row”）指定每个元素，或者使用id（如“data\u table”）指定表本身

$('.table_row').each(function(index){ //Class based selector
$('#data_table tr').each(function(index){ //Id based selector

---

请尝试以下代码

$(document).ready(function () {

  var search$ = $('#search')
    , table$ = $('#mytable')
    , content = search$.val().toLowerCase();

  search$.change(function() {
    if (search$.val() === content) { return; }
    content = search$.val().toLowerCase();

    table$.find('tr').show();

    table$
      .find('h4')
       .filter(function (index, element) { 
           return $(this).text().toLowerCase().indexOf(content) === -1; })
      .closest('tr')
      .hide();    
  });

});​

---

我还创建了一个用于演示的和一个用于更精彩的关键事件的。玛丽莎：你尝试过建议的解决方案吗？我现在正在尝试。虽然我觉得我用错了。表单操作没有指定，因此当我单击“搜索”按钮时，它只是刷新页面。@Marisa:您需要转到服务器吗？否则，请从按钮中删除表单和class='submit'，啊哈，这就是表单的问题所在。是的，我不需要去服务器。我现在摆脱了状态。不过，现在当我单击search按钮时，它表示找不到searchEnter。您的答案中是否有额外的括号？@Marisa:使用文本框上的更改事件，当您离开文本框时，代码将被触发。如果只想在单击按钮时触发搜索，则必须更改代码。我的答案中的代码立即运行，并将其自身附加到文本框。否则，您将在每次单击时注册更改事件。因此，您需要决定是在离开字段时搜索，还是在单击按钮时搜索。