How to Hide or Show a Table Column by Name Using jQuery?

How to Hide or Show a Specific Table Column by Its Name with jQuery

Selecting elements by class using jQuery is straightforward. However, if you want to target elements by their name attribute, you might face unexpected results. This article demonstrates how to hide and show a specific table column using jQuery's attribute selector.

Consider the following HTML table, where the second column has the same name, "tcol1," for all rows:

<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>

Using the class selector, we can easily hide the second column:

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

However, attempting to hide the second column by its name using the default selection method doesn't work:

$("tcol1").hide();

To select elements by their name, jQuery provides the attribute selector. The following code sample demonstrates how to select and hide the second column using the attribute selector:

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

Additionally, the attribute selector offers various options to match different name attributes:

• $('td[name="tcol1"]'): Matches the exact name "tcol1"
• $('td[name^="tcol"]'): Matches names that start with "tcol"
• $('td[name$="tcol"]'): Matches names that end with "tcol"
• $('td[name*="tcol"]'): Matches names that contain "tcol" anywhere

By utilizing the attribute selector, you can efficiently target and manipulate specific elements based on their name attributes, allowing you to easily expand or hide the desired column in this case.

The above is the detailed content of How to Hide or Show a Table Column by Name Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!