jQuery Girl
  1. jQuery Girl
  3. jQuery supprimer la colonne de table HTML
Intereting Posts
Passer des propriétés de site avec javascript comment placer du texte sur l’image et enregistrer l’image avec du texte en utilisant jquery / html5 / php Argument de publication ou de rappel non valide. Lorsque la liste déroulante est remplie avec jquery et qu’il y a une publication (postback) Evénement Fire OnAppend pour l’élément jQuery lorsqu’il est ajouté au DOM jQuery 1.7 clientX / pageX undefined Simple javascript trouver et remplacer Réorganiser les éléments DOM Supprimer ‘& nbsp;’ – en train d’essayer Fonction Onclick basée sur l’identifiant de l’élément Chargement différé du contenu de la page à l’aide de JavaScript ou de jQuery atsortingbut jquery étrange ajouté à la case à cocher dans ie8 HTML Mutli Select Ne pas publier de valeurs Retour à PHP Lecture de fichier Excel dans Reactjs jQuery défiler vers le haut de l’iframe parent Comment redimensionner une zone de saisie de texte (comme textarea) en faisant glisser son coin inférieur droit à l’aide de jQuery?

jQuery supprimer la colonne de table HTML

J’ai un tableau HTML comme ceci: 

  
 DELETE ROWCOL 1 DELETE COLCOL 2 DELETE COLCOL 3 DELETE COLCOL 4 DELETE COLCOL 5 DELETE COLCOL 6 
 
 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 
 
 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2

J’ai besoin d’une fonction pour supprimer la colonne spécifiée lorsque je clique sur le lien avec la classe “delete”. Pouvez vous aider?

Après quelques années, il est probablement temps de mettre à jour la réponse à cette question. 

 // Listen for clicks on table originating from .delete element(s) $("table").on("click", ".delete", function ( event ) { // Get index of parent TD among its siblings (add one for nth-child) var ndx = $(this).parent().index() + 1; // Find all TD elements with the same index $("td", event.delegateTarget).remove(":nth-child(" + ndx + ")"); });

Une manière générique (non testée): 

 $("a.delete").click(function() { var colnum = $(this).closest("td").prevAll("td").length; $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove(); }

Pas besoin de changer le balisage.

Voici comment je le ferais.

Atsortingbuez chaque cellule dans une colonne portant le même nom de classe. Ensuite, avec jQuery, supprimez toutes les balises qui portent ce nom de classe.

Cet ancien sujet est arrivé en haut de Google mais donne des réponses très pauvres. Longtemps perdu à faire ce travail, mais la solution facile serait ici par exemple

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html 

  $(document).ready(function() { $('#btnHide').click(function() { $('td:nth-child(2)').hide(); // if your table has header(th), use this //$('td:nth-child(2),th:nth-child(2)').hide(); }); });

Je n’aimais pas vraiment les solutions de ce billet, alors j’ai proposé la mienne. Idéalement, il faudrait: un sélecteur de type de type qui faciliterait grandement les choses. Mais malheureusement, JQuery ne la prend pas en charge “en raison de leur manque d’utilité réelle”. Ehh ..

Alors voici ma solution qui fait le tour en utilisant: expression nth-child: 

 $("a.delete").click(function(event) { event.preventDefault(); var current_cell = $(this).closest("td"); var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1; var column_to_delete = current_cell.prevAll("td").length+1; $('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove(); });

Dans la réponse de Jonathan Sampson, j’ai modifié le code pour gérer les balises de table contenant un élément

et fournir un bel effet de fondu: 

 $(document).ready(function(){ $("a.delete").live("click", function(){ /* Better index-calculation from @activa */ var myIndex = $(this).closest("th").prevAll("th").length; $(this).parents("table").find("tr").each(function(){ $(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut('slow', function() { $(this).remove(); fixTitles(); }); }); }); }); function fixTitles() { $("tr:eq(0) td").each(function(a){ $(this).html("Delete Row COL " + (a+1)); }); }

Je sais que le sujet est ancien mais je pense que le moyen le plus simple est simplement de mettre: $ (“. Delete”). Remove ();

câlins.

Zanoldor

jQuery: 

  $('.delete').click(function() { var colNumber = $(this).parents().find('td').attr('col'); $('td[col='+colNumber+']').remove(); return false; });

HTML: 

 
  
 DELETE COLCOL 1 DELETE COLCOL 2 DELETE COLCOL 3 DELETE COLCOL 4 DELETE COLCOL 5 DELETE COLCOL 6 
 
 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 
 
 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2

Essaye ça: 

  $("a.delete").click(function(){ var td=$(this).parent(); var col=$(td).text(); col=col.subssortingng(col.length-2)*1; var f="td:nth-child("+col+")"; var tbl=$(td).parent().parent(); $(tbl).find("tr").each(function(){ $(this).find(f).hide(); });

Testé en FF3.5.

il y a une préoccupation bien obtenir le numéro de colonne. Si le nombre de colonnes dépasse 2 chiffres, cela ne fonctionnera pas. Il serait préférable de mettre l’atsortingbut personnalisé et de lui atsortingbuer la position de la colonne. 

  ...

rappelez-vous avec l’index n-enfant commence à 1

Essayez ceci, j’ai le résultat exact 

 var colnum = $(e.target).closest("td").length; $(e.target).closest("table").find("tr").each(function(){ $(this).find("td:eq(" + colnum + ")").remove()});

Après avoir lu cet article, j’ai essayé la première solution en utilisant la fonction remove de jQuery. Mais il semble y avoir un problème avec cette fonction lorsque vous l’utilisez sur une ligne de tableau pour supprimer une cellule. Le problème est lié à une modification simultanée. Dans l’exemple avec cette réponse, si vous essayez d’utiliser la fonction index (), cela ne fonctionnera pas car l’index de cellule change à chaque fois que vous supprimez une cellule. Une solution pourrait être d’utiliser la fonction hide () sur la cellule que vous souhaitez supprimer. Mais si vous devez vraiment supprimer la colonne (supprimez-la du DOM), la méthode qui a fonctionné pour moi consiste à utiliser le javascript native pour supprimer la colonne. 

 $(function() { $('table tr').each(function(e, row) { var i = 0; $(row).find('td, th').each(function(e, cell) { if (i == 1) { row.removeChild(cell); } i++; }); });

Dans cet exemple, vous supprimez la deuxième colonne du tableau: i == 1 …