Sélectionner un élément HTML en Javascript dans une boucle
Salut à tous,
J'essaie de développer un petit système semblable a excel en version web : j'ai un tableau et je veux que lorsque je change la valeur d'une case, que ça s'enregistre dans la BDD
Pour ça je compte utiliser Ajax.
Le tableau se présente sous forme de liste qui est générée depuis la BDD (j'utilise donc une boucle en PHP pour générer le nombre de lignes nécessaires)
J'ai déjà développé l'idée mais je bloque sur un soucis : lorsque je récupère la valeur de la case pour la passer en POST, le script ne récupère que la valeur de la première case de la première ligne
je pense qu'a cause du fait que ces lignes soient générées en boucle, les id sont donc identiques pour chaque ligne et le script Javascript ne parvient donc pas a cibler précisément la case que je veux
Auriez vous une idée pour résoudre ce problème ?
Voila mon code PHP :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $req = $db->prepare ( "SELECT * FROM Eleves, D1a WHERE idEleves = idEleve");
$req->execute ();
while ( $userRow = $req->fetch ( PDO::FETCH_ASSOC )) {
echo '<tr>';
echo '<th>'.$userRow ['nom'].'</th>';
echo '<th>'.$userRow ['prenom'].'</th>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">francais</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['francais'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">maths</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['maths'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">histoire-geo</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['histoire-geo'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">svt</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['svt'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">techno</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['techno'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">physique</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['physique'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">arts plastiques</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['arts plastiques'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">musique</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['musique'].'"></td>';
echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">eps</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['eps'].'"></td>';
echo '<th></th>';
echo '</tr>';
} |
Et Javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| function change()
{
var colonne = document.getElementById("colonne").innerHTML;
var valeur = document.getElementById("champs").value;
var idEleve = document.getElementById("ideleves").innerHTML;
objData = { colonne: colonne, valeur: valeur, idEleve: idEleve };
$.ajax({
url : './php/synthese.php',
type : 'POST',
data : objData,
dataType : 'html'
});
} |
Merci d'avance :)
