如何使用 jQuery 按名稱隱藏或顯示表格列？

如何使用 jQuery 按名稱隱藏或顯示特定表列

使用 jQuery 按類別選擇元素非常簡單。但是，如果您想透過名稱屬性來定位元素，您可能會遇到意外的結果。本文示範如何使用 jQuery 的屬性選擇器隱藏和顯示特定的表格列。

考慮以下 HTML 表格，其中第二列的所有行都具有相同的名稱「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>

使用類別選擇器，我們可以輕鬆隱藏第二列：

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

但是，嘗試隱藏使用預設選擇方法按名稱選擇第二列不起作用：

$("tcol1").hide();

要按名稱選擇元素，jQuery 提供了屬性選擇器。以下程式碼範例示範如何使用屬性選擇器選擇和隱藏第二列：

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

此外，屬性選擇器提供了各種選項來匹配不同的名稱屬性：

• $('td[name="tcol1"]')：匹配確切的名稱"tcol1"
• $('td[name^="tcol"]') ：符合以「tcol」開頭的名稱
• $(' td[name$="tcol"]')：匹配以結尾的名稱"tcol"
• $('td[name*="tcol"]')：匹配任何地方包含「tcol」的名稱

透過利用屬性選擇器，您可以根據名稱屬性有效地定位和操作特定元素，在這種情況下允許您輕鬆展開或隱藏所需的列。

以上是如何使用 jQuery 按名稱隱藏或顯示表格列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！