Question

我在#attribute。

的桌子下面有一个带有多个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 Bootstrap）构建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>

Answer 1

您可以仅为行使用选择器，这可能是一种更清晰的启动方式。因此，在您的代码中，在确定输入新文本后，请使用以下内容启动一个块：

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

将选择所有行。如果你的TR元素不只是这个表，你可以用一个类指定每个元素，比如'table_row'或者用id指定表本身，例如'data_table'

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

Answer 2

请尝试以下代码......

$(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();    
  });

});

我还创建了一个JSFiddle来演示和一个JSFiddle，它可以处理一个更好的关键事件。

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

2 个答案: