Croix onclick pour supprimer une ligne/colonne de tableau HTML

Bonjour, voici mon problème :

Je suis en train de créer un tableau HTML dynamique où l'on peut ajouter/supprimer les lignes/colonnes en javascript.

Je vais m'attarder sur les colonnes
j'ai donc créer un élément "table" stocké dans une variable.
puis un tableau javascript qui contient tous les "tr" (les lignes)
puis un tableau javascript nommé "delC" qui contient autant d'élément "th" qu'il y a de colonnes. Ces th contiennent des croix et forment la ligne supérieure du tableau
enfin un tableau 2D qui contient les "td". (c'est un tableau rectangle)

J'ai créer la fonction js supprimerColonne(A) qui supprime la colonne d'indice A et qui est fonctionnelle.
Je souhaiterais maintenant que les croix contenus dans les "th" puissent être cliquable pour supprimer la colonne qui est sous elle. Pour cela j'ai écrit:

for(var i = 0; i<delC.length; i++){
    delC[i].onclick = supprimerColonne(i);
  }

Le problème c'est qu'avec une telle instruction, la fonction supprimerColonne(i) se lance et le onclick ne fait rien.

Je pense pouvoir régler ça en créant un tableau de fonction mais avant de me lancer dedans, quelqu'un a-t-il une meilleure solution ?
Modifié par Johnsonn (29 May 2018 - 14:53)

Salut,

De mémoire il faut faire

for(var i = 0; i<delC.length; i++){
    delC[i].onclick = function() { supprimerColonne(i) };
}

pour que la fonction ne soit pas lancée cash.

oui en effet merci beaucoup
Mais j'ai un nouveau problème:
Lorsque je clique sur une croix après affectation de mes fonctions, mon "i" a changé de valeur à cause de la boucle et donc lorsque je clique sur la croix numéro 10, il tente de supprimer la colonne numéro "delC.length" qui n'existe pas.
Comment pourrais je associer à chaque croix, la fonction supprimerColonne(i) avec la valeur de i qui est à l'instant où j'associe la fonction.

j'ai trouvé la solution de faire passer le nombre par l'id du "th" qui contient la croix.
Un peu barbare .

J'y ai pensé aussi...

Sinon passer par les data-* https://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

Quand tu supprimes une ligne ou une colonne au clic, tu redessines le tableau (= tu supprimes la valeur des tables json et tu redessine le HTML) ou tu supprime juste dans le DOM à la volée ?

Bonjour Johnsonn,

Utilise la propriété cellindex d'un th ou td
je t'ai fait un petit exemple :
https://codepen.io/Zonecss/pen/pKoWax

merci beaucoup pour la solution je vais essayer d'adapter ça à mon projet

Personnellement je verrais quelque chose de plus simple comme ça par exemple :

https://codepen.io/anon/pen/WyvjpR

La première méthode fonctionne bien, je vais la garder mais merci bien quand même.

Qui veut jouer à cache-cache avec moi ?
https://codepen.io/bazooka07/pen/pKJaQa

un gist pour comprendre :
https://gist.github.com/bazooka07/22470fa04521e1905a4d498777888ecb

Et c'est JQuery free
Pourquoi détruire alors qu'il suffit juste de cacher en jouant avec une class "hide"
Et cela évite de détruire un arbre DOM .

Désolé pour le retard à répondre