3

以下のようなテーブル構造があり、リンクをクリックしたときに JQuery を使用してテーブル セルの表示をフィルタリングしたいと考えています。たとえば、このようなリンクがある場合、<a href="#" title="cat">show cats</a>"cat" という単語を含むセル以外のすべてのテーブル セルを非表示にします。「attr」、「contains」、「hide/show」の組み合わせを使用できるので、クリックしているリンクのタイトル属性を取得して、表のセルのテキストと一致させることができると考えています。最後に、必要なセルを表示/非表示にしますが、理論と実装は 2 つの異なるものであり、これが機能するかどうか、またはすべてをまとめる方法がわからないため、ここで専門家にアドバイスを求めると思いました。 

<table>
  <tr>
    <td>cat</td> 
    <td>cat</td>
  </tr>

  <tr>
    <td>dog</td>
    <td>dog</td>
  </tr>

  <tr>
    <td>horse</td>
    <td>horse</td>
  </tr>
</table>
4

2 に答える 2

3

これを試して：

$('a').click(function(e){
   e.preventDefault();  // prevents default action of the anchor
   var con = $(this).attr('title');
   $('td').hide();
   $('td:contains("'+ con +'")').show()
})

デモ

于 2012-07-08T22:06:42.723 に答える
1

この例では、テーブルに次の ID を指定しましたtableSelector-

<table id="tableSelector"></table>

$("a.toggle_link").on('click',function(e){
  e.preventDefault();
  var cells = $("#tableSelector td");
  var searchString = $(this).attr('title');
  cells.hide();
  $("#tableSelector td:contains('" + searchString + "')").show();
});

クリックされるたび<a class="toggle_link">に、このコードはすべてのセルを非表示にし、クリックされたタイトルを調べて、<a>そのテキストを含むセルのみを表示します。

関数を忘れないでくださいpreventDefault()。<a>これにより、実数のないタグをクリックするというデフォルトの動作 (href通常は画面の上部にジャンプ) が防止されます。

于 2012-07-08T22:08:23.480 に答える