Comment masquer ou afficher une colonne de tableau par nom à l'aide de jQuery ?

Comment masquer ou afficher une colonne de tableau spécifique par son nom avec jQuery

La sélection d'éléments par classe à l'aide de jQuery est simple. Toutefois, si vous souhaitez cibler des éléments par leur attribut name, vous risquez d'être confronté à des résultats inattendus. Cet article montre comment masquer et afficher une colonne de tableau spécifique à l'aide du sélecteur d'attributs de jQuery.

Considérez le tableau HTML suivant, où la deuxième colonne porte le même nom, "tcol1", pour toutes les lignes :

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

En utilisant le sélecteur de classe, nous pouvons facilement masquer la deuxième colonne :

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

Cependant, en essayant de masquer la la deuxième colonne par son nom en utilisant la méthode de sélection par défaut ne fonctionne pas :

$("tcol1").hide();

Pour sélectionner des éléments par leur nom, jQuery fournit le sélecteur d'attribut. L'exemple de code suivant montre comment sélectionner et masquer la deuxième colonne à l'aide du sélecteur d'attribut :

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

De plus, le sélecteur d'attribut propose diverses options pour faire correspondre différents attributs de nom :

• $('td[name="tcol1"]') : correspond au nom exact "tcol1"
• $('td[name^="tcol"]') : correspond aux noms commençant par "tcol"
• $(' td[name$="tcol"]') : correspond aux noms qui se terminent par "tcol"
• $('td[name*="tcol"]') : correspond aux noms qui contiennent "tcol" n'importe où

En utilisant le sélecteur d'attributs, vous pouvez cibler et manipuler efficacement des éléments spécifiques en fonction de leurs attributs de nom, vous permettant ainsi d'agrandir ou de masquer facilement la colonne souhaitée dans ce cas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!