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 :)
