0

我在带有#attribute 的表下的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();
                    }
                })
            })
        }
    });
}

我想根据在搜索框中输入的内容来更改表格的内容。虽然我也不确定如何为搜索框构建 html（也使用 Twitter Bootstrap）或者 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>
4

2 回答 2

0

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

$('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
于 2012-07-11T18:57:34.367 回答
0

试试下面的代码...

$(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，它适用于一个更好的按键事件。

于 2012-07-11T19:11:14.773 回答