Maison >interface Web >js tutoriel >JQUERY REPLOT TABLE COLUMN (par numéro de colonne)

JQUERY REPLOT TABLE COLUMN (par numéro de colonne)

Joseph Gordon-Levitt
Joseph Gordon-Levittoriginal
2025-02-27 09:19:19619parcourir

Utilisez jQuery pour supprimer les colonnes de table (par numéro de colonne)

jQuery remove table column (by column number)

Ce qui suit est un simple extrait de code jQuery pour supprimer la colonne de la table entière en fonction du numéro de colonne. Il supprime également le titre de ligne de table associé à la colonne supprimée.

<code class="language-javascript">// 删除第一列
$('#table').find('td,th').first().remove();

// 删除第二列
$('table tr').find('td:eq(1),th:eq(1)').remove();

// 删除第n列 (n代表列序号)
$('table tr').find('td:eq(n),th:eq(n)').remove();</code>

Des questions fréquemment posées pour la suppression de la colonne de table jQuery (FAQ)

Comment utiliser jQuery pour supprimer une colonne spécifique dans un tableau?

Pour utiliser jQuery pour supprimer une colonne spécifique dans une table, vous devez utiliser le sélecteur :nth-child(). Ce sélecteur correspond à chaque élément, qui est le nième élément enfant de son parent, quel que soit son type. Voici un exemple de la façon de l'utiliser:

<code class="language-javascript">$("table td:nth-child(2),th:nth-child(2)").remove();</code>

Dans cet exemple, la deuxième colonne de la table est supprimée. Vous pouvez remplacer "2" par le numéro de colonne que vous souhaitez supprimer.

Puis-je utiliser jQuery pour supprimer plusieurs colonnes dans une table?

Oui, vous pouvez utiliser jQuery pour supprimer plusieurs colonnes dans une table. Il vous suffit de spécifier le numéro de colonne dans le sélecteur :nth-child(). Voici un exemple:

<code class="language-javascript">$("table td:nth-child(2),th:nth-child(2),td:nth-child(3),th:nth-child(3)").remove();</code>

Dans cet exemple, les deuxième et troisième colonnes de la table sont supprimées.

Comment masquer la colonne au lieu de le supprimer?

Si vous souhaitez masquer la colonne au lieu de le supprimer, vous pouvez utiliser la méthode hide() dans jQuery. Voici un exemple:

<code class="language-javascript">$("table td:nth-child(2),th:nth-child(2)").hide();</code>

Dans cet exemple, la deuxième colonne de la table est cachée.

Puis-je utiliser jQuery pour supprimer des colonnes en fonction de son contenu?

Oui, vous pouvez utiliser jQuery pour supprimer des colonnes en fonction de leur contenu. Vous pouvez utiliser le sélecteur :contains() pour trouver une colonne contenant du contenu spécifique, puis utiliser la méthode remove() pour la supprimer. Voici un exemple:

<code class="language-javascript">$("table td:contains('Content'),th:contains('Content')").remove();</code>

Dans cet exemple, toute colonne contenant le mot "contenu" est supprimée.

Comment supprimer des colonnes dans le tableau sans utiliser jQuery?

Si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser Pure JavaScript pour supprimer des colonnes dans le tableau. Voici un exemple:

<code class="language-javascript">var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
  table.rows[i].deleteCell(1);
}</code>

Dans cet exemple, la deuxième colonne de la table est supprimée. Vous pouvez remplacer "1" par l'indice de la colonne que vous souhaitez supprimer.

Comment utiliser jQuery pour supprimer la dernière colonne d'une table?

Pour utiliser jQuery pour supprimer la dernière colonne de la table, vous pouvez utiliser le sélecteur :last-child. Voici un exemple:

<code class="language-javascript">$("table td:last-child,th:last-child").remove();</code>

Dans cet exemple, la dernière colonne de la table est supprimée.

Puis-je utiliser jQuery pour supprimer des colonnes dans un tableau en fonction de son titre?

Oui, vous pouvez utiliser jQuery pour supprimer des colonnes dans le tableau en fonction de son titre. Vous pouvez utiliser le sélecteur :contains() pour trouver un titre contenant du contenu spécifique, puis utiliser la méthode remove() pour supprimer la colonne correspondante. Voici un exemple:

<code class="language-javascript">var index = $("table th:contains('Header')").index() + 1;
$("table td:nth-child(" + index + "),th:nth-child(" + index + ")").remove();</code>

Dans cet exemple, la colonne intitulée "En-tête" est supprimée.

Comment utiliser jQuery pour supprimer les colonnes dans une table si je ne connais pas le numéro de colonne?

Si vous ne connaissez pas le numéro de colonne que vous souhaitez supprimer, vous pouvez utiliser le sélecteur :contains() pour trouver une colonne contenant du contenu spécifique, puis utiliser la méthode remove() pour le supprimer. Voici un exemple:

<code class="language-javascript">// 删除第一列
$('#table').find('td,th').first().remove();

// 删除第二列
$('table tr').find('td:eq(1),th:eq(1)').remove();

// 删除第n列 (n代表列序号)
$('table tr').find('td:eq(n),th:eq(n)').remove();</code>

Dans cet exemple, toute colonne contenant le mot "contenu" est supprimée.

Puis-je utiliser jQuery pour supprimer d'abord la colonne de table, puis l'ajouter?

Oui, vous pouvez utiliser jQuery pour supprimer les colonnes de table et les ajouter. Cependant, une fois la colonne supprimée, il ne peut pas être ajouté directement. Vous devez stocker la colonne dans une variable avant de la supprimer, puis de le redevenir si nécessaire.

Comment utiliser jQuery pour supprimer les colonnes dans le tableau sans affecter la mise en page?

Lorsque vous utilisez jQuery pour supprimer les colonnes dans une table, la disposition de la table sera automatiquement ajustée. Cependant, si vous souhaitez conserver la mise en page, vous pouvez masquer la colonne au lieu de le retirer. Voici un exemple:

<code class="language-javascript">$("table td:nth-child(2),th:nth-child(2)").remove();</code>

Dans cet exemple, la deuxième colonne de la table est cachée et la disposition de la table est maintenue.

Cette réponse révisée fournit des explications plus détaillées et précises pour chaque FAQ, améliorant la clarté et l'utilité.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn