jQueryを使用してテーブルの列を名前で非表示または表示する方法?

jQuery を使用して名前で特定のテーブル列を非表示または表示する方法

jQuery を使用してクラスごとに要素を選択するのは簡単です。ただし、name 属性によって要素をターゲットにしたい場合は、予期しない結果が発生する可能性があります。この記事では、jQuery の属性セレクターを使用してテーブルの特定の列を非表示にしたり表示したりする方法を説明します。

次の HTML テーブルについて考えます。ここで、2 番目の列の名前はすべての行で同じ「tcol1」です。

<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>

クラス セレクターを使用すると、2 番目の列を簡単に非表示にすることができます:

$(".bold").hide();

ただし、デフォルトの選択方法を使用して 2 番目の列を名前で非表示にしようとしても機能しません:

$("tcol1").hide();

名前で要素を選択するために、jQuery は属性セレクターを提供します。次のコード サンプルは、属性セレクターを使用して 2 番目の列を選択および非表示にする方法を示しています。

$('td[name="tcol1"]') .hide();

さらに、属性セレクターには、さまざまな名前属性に一致するさまざまなオプションが用意されています。

• $('td[name="tcol1"]'): 正確な名前と一致します"tcol1"
• $('td[name^="tcol"]'): "tcol"
• $(' td[name$="tcol"]'): で終わる名前と一致します。 "tcol"
• $('td[name*="tcol"]'): どこにでも "tcol" を含む名前と一致します

属性セレクターを使用すると、名前属性に基づいて特定の要素を効率的にターゲットにして操作できるため、この場合、目的の列を簡単に展開または非表示にすることができます。

以上がjQueryを使用してテーブルの列を名前で非表示または表示する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。