Discussion :

[SlimEmShady]

Bonjour amis développeurs !

Je vous sollicite aujourd'hui pour un petit soucis, je cherche la solution depuis ce matin mais je ne trouve rien, je tente des choses mais ça ne passe pas, ou du moins pas comme je veux..
Je suis assez débutant en Javascript, donc soyez indulgent..

Je vous explique..
J'ai un tableau html vide, il n(y a dedans que des en-têtes. En fonction d'éléments choisis dans un select et envoyés avec Javascript, je crée des lignes et des colonnes dans mon tableau, et je le remplis avec les valeurs de mon select.
Jusqu'ici tout fonctionne correctement.
Je souhaite maintenant, au bout de chaque ligne du tableau, ajouter une image (une croix) qui me permettra de supprimer la ligne du tableau si on clique dessus.
Problème : mon image ne s'insère pas où je veux, et je me demande comment je vais pouvoir lui passer un ID pour lui mettre un événement onClick.

Mon tableau html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
                <table id="table_liste_presta"> 
                    <thead>
                        <tr>
                            <th>Famille</th>
                            <th>Type de prestation</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="tbody_type_presta">
                    </tbody>
                </table>

Mon JS (c'est la fin qui pêche..)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
// Ajout des lignes dans la liste
function AjouterTypePresta(){
    var tableau = document.getElementById("tbody_type_presta");
 
    var famille = document.getElementById("select_famille_presta"); // Récupère le select
    var indexFamille = famille.options.selectedIndex; // récupère l'option sélectionnée du select
    var libelleFamille = famille.options[indexFamille].innerHTML; // récupère le libellé de l'option sélectionnée
 
    var type = document.getElementById("select_type_presta");
    var indexType = type.options.selectedIndex; // récupère l'option sélectionnée du select
    var libelleType = type.options[indexType].innerHTML; // récupère le libellé de l'option sélectionnée
 
    var ligne = tableau.insertRow(-1);//on a ajouté une ligne
 
    var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
    colonne1.innerHTML += libelleFamille;//on y met le contenu de titre
 
    var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
    colonne2.innerHTML += libelleType;
 
    var myImg = new Image();
    myImg.src = 'img/form_picto_remove.png';
//    document.body.appendChild(myImg);
    var colonne3 = ligne.insertCell(2);
    colonne3.innerHTML += $('tbody#tbody_type_presta').html(myImg);//on ajoute le bouton de suppression
}

Pour la dernière ligne, elle fonctionne presque (ça me supprime toute la ligne du tableau et la remplace par mon image...).
J'ai aussi essayé comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
colonne3.innerHTML += document.body.appendChild(myImg);

Mais ici s'affiche [object HTMLImageElement] là où je veux mon image, et mon image s'affiche tout en bas de ma page web.

Merci de votre aide qui me sera précieuse..

[SlimEmShady]

J'ai finalement résolu le problème de l'affiche, me reste plus qu'à faire un événement onclick dessus mais ça, je devrais y arriver

Je laisse le code corrigé ici au cas où ça servirait, et je passe le post en Résolu !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var myImg = document.createElement('img');
myImg.setAttribute('src', 'img/form_picto_remove.png');
var colonne3 = ligne.insertCell(2);
colonne3.appendChild(myImg);//on ajoute le bouton de suppression

Merci quand même

[SpaceFrog]

ce genre de choses est grandement simplifié avec l'utilisation de jquery...

[SlimEmShady]

Oui, j'ai effectué mon onClick avec jQuery pour supprimer les lignes de mon tableau, ça marche plutôt bien.
Maintenant je passe sur une partie plus compliquée mais malheureusement je ne pourrai pas avoir d'aide sur un forum, c'est un peu trop complexe pour être expliqué à l'écrit sans schémas ^^

Je vais me débrouiller

Au plaisir !

[NoSmoking]

Bonjour,
je te souhaite bon courage effectivement si tu ne prend pas le temps de faire un peu de ménage dans ton code, la cohabitation de jQuery et de javascript 'vanilla' tôt ou tard te jouera des tours.

Si l'on prend ton bout de code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var myImg = document.createElement('img');
myImg.setAttribute('src', 'img/form_picto_remove.png');
var colonne3 = ligne.insertCell(2);
colonne3.appendChild(myImg);//on ajoute le bouton de suppression

j'ai quand même bien l'impression que la variable ligne est bien la TR que tu cherches à détruire lors du click sur l'image. Donc un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
myImg.onclick = function(){
  ligne.parentNode.removeChild( ligne);
};

devrait suffire !

[SlimEmShady]

Bonjour,

Effectivement, ça fonctionne aussi comme ça. J'ai laissé ma fonction telle qu'elle et j'ai ajouté ton code à la fin (l'image ne s'affichait pas si je ne laissais pas toute ma fonction).
Par contre ça simplifie le reste du processus avec la suppression de la ligne.

Merci !