Salut à tous, j'ai un petit soucis :)
J'ai un tableau en html/php:
Code PHP :
echo"<table id='tab_tech'>";
echo"</table>";
Grace au javacript, j'arrive lorsque l'on clic sur un bouton à ajouter a ce tableau le choix contenu dans une listebox:
Code Javascript :
function ajouter_Technicien(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;// la y a le nom du technicien
// On se sert de innerHTML pour rajouter les options a la liste
ajouterLigne(leselect, idtechnicien);
}
}
// Ici on va voir comment faire du post
xhr.open("POST","vue/ajaxTechnicien.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('technicien_affecte');
idtechnicien = sel.options[sel.selectedIndex].value;
if( idtechnicien == -1 ){
alert("Choisissez un technicien valable");
}else{
xhr.send("ID_TECHNICIEN="+idtechnicien);
}
}Une fois que dans leselect est contenu le nom de mon technicien grace a l'AJAX, je passe dans les paramètres d'une nouvelle fonction ajouterLigne fonction le nom et l'id de mon technicien.
(Dans cette partie du code, si sur chaque ligne sont répété les paramètres de largeur de cellule, c'est qu'au début je n'ai aucune cellule.)
Code Javascript :
function ajouterLigne(nom, id)
{
tableau = document.getElementById("tab_tech");
var ligne = tableau.insertRow(-1);//on a ajouté une ligne
var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
colonne1.setAttribute('width', '28px');
colonne1.innerHTML += "<img src='img/technicien_petit.png' onclick='alert(this.parentNode.rowIndex);'>"; //onclick='alert(this.parentNode.rowIndex);' est censé me dire le numero de la ligne ou est l'image
colonne1.innerHTML += "<input type='hidden' name='nom_technicien_"+id+"' value='"+nom+"'/>";
colonne1.innerHTML += "<input type='hidden' name='id_technicien_"+id+"' value='"+id+"'/>";
var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
colonne2.setAttribute('width', '235px');
colonne2.innerHTML += nom;
var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
colonne3.setAttribute('width', '22px');
colonne3.setAttribute('align', 'right');
colonne3.innerHTML += "<img src='img/supprimer_blanc_petit.png' onclick='supprimerLigne(this.parentNode.rowIndex);'>";
}Lorsque je clic donc sur la première image dans mon tableau qui est dans la premiere colonne de chaque ligne, l'alert(this.parentNode.rowIndex) devrait me retourner le numéro de la ligne d'où l'image a été clické.
Cependant lorsque je clique sur cette image, l'alert me retourne "undefined".
Ce retour me pose un problème car j'ai la fonction supprimerLigne qui me permet de supprimer une ligne du tableau en fonction de son indice qui n'arrive pas a trouver la ligne qu'elle doit supprimer.
Code Javascript :
function supprimerLigne(num)
{
document.getElementById("tab_tech").deleteRow(num);
modifier_Liste_Technicien();
}
Et donc, lorsque j'ai plusieurs éléments dans le tableau, si je supprime le dernier, la fonction prenant en paramètre undefined me supprime la première ligne.
Auriez-vous une astuce pour solutionner mon problème?
Est-ce que le this.parentNode.rowIndex est la bonne façon pour récuperer l'indice d'une ligne?
Merci d'avance