Placement d'une image dans un tableau
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:
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:
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:
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..
