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

次のコードを試してください...

$(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 に答える
0

行だけにセレクターを使用できます。これは、おそらく開始するためのよりクリーンな方法です。したがって、コードで、新しいテキストが入力されたことを確認したら、次のようなブロックを開始します。

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

すべての行を選択します。このテーブル以外にも TR 要素がある場合は、「table_row」などのクラスでそれぞれを指定するか、「data_table」などの ID でテーブル自体を指定できます。

$('.table_row').each(function(index){ //Class based selector
$('#data_table tr').each(function(index){ //Id based selector
于 2012-07-11T18:57:34.367 に答える