Editer une ligne dans un tableau js

Version imprimable

Bsr à toute l'équipe; j'ai un souci:

Un code vaut mieux que bavardage:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 window.insererLigne_initial = function(){ <?php do{ ?> var cell; tableau = document.getElementById("idTable"); cell = ligne.insertCell(0); cell.innerHTML = " <input type='hidden' class='code' value='' />"; cell = ligne.insertCell(1); cell.innerHTML = " <textarea class='generation' id='generation' rows='1' cols='12' readOnly='true' ><?php echo $row_scheduleview['linegeneration']; ?></textarea>"; var text_code = tableau.querySelectorAll("input.code"); var text_gener = tableau.querySelectorAll("textarea.generation"); ch_code = text_code[nbLignesAvant-1].value; ch_gener = text_gener[nbLignesAvant-1].value; <?php }while ($row_scheduleview = mysql_fetch_assoc($scheduleview)) ?> }
Voilà ramasser mon code:
- jai écrit requete
- jai créer le tableau avec 2 champs grace à do... while et afficher ainsi les élément d'une table de ma base.
Maintenant je veux une créer une fonction javascript pour faire la mise a jour dema base en fonction de la ligne selectionnée.
Le problème est qu'il m'affiche toujours la dernière ligne de mon tableau, donc dernier enregistrement.

Cela même si je clique sur n'importe quelle ligne du tableau. Aidez moi, je fais comment pour écrire cette fonction je suis bloqué depuis des jours....

Merci d'avance à vous tous

15/10/2013, 14h42
SpaceFrog

Merci de jeter un coup d'oeil rapide sur les règles d'utilisation de ce forum ...

merci de nous montrer le code html js ... pas php

Je présente mes excuz. Au fait c'est le code js qui est là, c'est à dire ma fonction javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.insererLigne_initial = function(){
 
    var cell; 	
 
	tableau = document.getElementById("idTable");
cell = ligne.insertCell(0);
    cell.innerHTML = " 	<input type='hidden' class='code' value='' />";
 
	cell = ligne.insertCell(1);
    cell.innerHTML = " <textarea class='generation' id='generation' rows='1' cols='12' readOnly='true' ></textarea>";
 
 	var text_code = tableau.querySelectorAll("input.code");
	var text_gener = tableau.querySelectorAll("textarea.generation"); 
	ch_code = text_code[nbLignesAvant-1].value;
	ch_gener = text_gener[nbLignesAvant-1].value; 
    cell = ligne.insertCell(2);
    cell.innerHTML = " <input type='button' class='update' id='update' value='Update' onclick='Update_Ligne(ligne)' />";
 
}
function Update_Ligne(ligne){
	alert('N° de ligne est '+ligne.rowIndex);
 
}

Si je reviens sur mon code le voilà épuré du php
Mais je ne sais comment écrire cette fonction car ligne.rowIndex ne retourne toujours le nombre total de lignes de mon tableau.
Merci à vous

16/10/2013, 20h03
NoSmoking
Bonjour,
questionnement de ma part en lisant
Code:

1 2 tableau = document.getElementById("idTable"); cell = ligne.insertCell(0);
ligne sort d'où ?

Pose toi également la question de ce que vaut ligne lors de l’exécution de la fonction.

Tu peux également remonter l'arbre DOM à partir de l'INPUT pour retrouver la ligne TR donc.
17/10/2013, 10h20
lastarfane
Citation:
Envoyé par NoSmoking

Code:

1 2 tableau = document.getElementById("idTable"); cell = ligne.insertCell(0);

ligne sort d'où ?
ligne est une variable qui ajoute une ligne au tableau:

Code:

var ligne = tableau.insertRow(-1); // ici création d'une ligne pour ajout en fin de table
17/10/2013, 10h36
Kaamo

Je ne pense pas que ce soit le code html/js généré. Dans le PHP posté par erreur dans le premier post, il y a une boucle. Du coup il doit y avoir autant de "bloc" dans la fonction insererLigne_initial qu'il y a de $scheduleview.

le soucis vient sûrement d'ici :

Code:

cell.innerHTML = " <input type='button' class='update' id='update' value='Update' onclick='Update_Ligne(ligne)' />";

En effet, la variable ligne de Update_Ligne(ligne) référencera toujours la dernière ligne ajoutée. C'est pourquoi ligne.rowIndex retourne toujours le nombre total de lignes du tableau.
17/10/2013, 10h49
SpaceFrog

il y a aussi sans doute un souci de multiplicité d'id ...
17/10/2013, 10h57
lastarfane

Citation:

le soucis vient sûrement d'ici :

Code:

cell.innerHTML = " <input type='button' class='update' id='update' value='Update' onclick='Update_Ligne(ligne)' />";

En effet, la variable ligne de Update_Ligne(ligne) référencera toujours la dernière ligne ajoutée. C'est pourquoi ligne.rowIndex retourne toujours le nombre total de lignes du tableau.

Tu as parfaitement raison Kaamo. Je pensais aussi que le problèm viendrait de cette ligne car tant qu'il ne vas voir les ligne de façon unique, je ne peux rien faire. Mais comment y remédier? ouf :calim2:
17/10/2013, 11h05
Kaamo

Tu construits un tableau HTML à l'aide de JavaScript qui lui même est construit à l'aide de PHP :aie:

- Soit tu te sers de PHP pour construire ton HTML, nul besoin de JavaScript (si ce n'est la fonction Update_Ligne)
- Soit JavaScript construit le HTML au chargement de la page en se basant sur un tableau de données construit par PHP

La première solution semble mieux pour ton cas. A moins que tu optes pour un système de templating JavaScript.
17/10/2013, 11h11
lastarfane

Tu sais Kaamo javais commencé par là; jai créé le tableau html directement avec mon code php.

Et justement mon probleme c'est de savoir exactement sur le bouton de quelle ligne l'utilisateur a cliqué afin de lui modifier uniquement cette ligne du tableau
17/10/2013, 11h14
Kaamo

Grâce à l'attribut id de la cellule.
17/10/2013, 11h19
lastarfane

Eclaire moi un peu plus STP.
17/10/2013, 11h26
SpaceFrog

http://www.emtssafetyshop.com.au/sho...ch-500x500.jpg
17/10/2013, 11h47
Kaamo

:mrgreen:

lastarfane,
- construit le tableau html grâce à PHP comme tu sembles déjà l'avoir fait.
- à chaque td, donne leur un id différent
- sur le onclick de l'input, tu passes l'id en paramètre de la fonction Update_Ligne().

C'est une solution parmi tant d'autres, qui semble la plus simple à mettre en place.

A méditer quand tu auras mis la solution ci dessus en place. Dissocier le HTML, du JavaScript.
Ne pas se servir des id, mais, par exemple, accéder aux td de la table ainsi
17/10/2013, 12h00
lastarfane

ok je mis met pour voir le result.

Merci je vous donnerai des nouvelles
17/10/2013, 12h05
Kaamo

J'ai commenté le Fiddle pour que tu comprennes mieux
17/10/2013, 14h17
lastarfane

Puisque ce que je veux faire c'est de mettre a jour les données de ma base avec les nouvelles valeurs saisies dans ce champs alors je préfère donneer un id à chaq ligne. Enfin je suppose que c'est possible. Jai donc donner un id a mon <tr> cependant je nai aucun résultats

Important de noter que c'est la cellule qui afffiche information qui servira de champs de saisie : je modifie juste le contenu.

Pourquoi passer par des ID alors que l'on peut réaliser cela via la délégation, on pourra même ajouter des lignes dynamiquement.

En mettant la surveillance du click sur la TABLE, il nous suffit de vérifier qui est la source et d’interagir suivant le cas.

exemple:

Code:

1
2
3
4
5
6
7
8
9
var oTable = document.getElementById('id_table');
oTable.onclick = function(e){
  e = e || event;
  var oSrc = e.target || e.srcElement;
  if( oSrc && oSrc.className == 'update'){
    var oParent = oSrc.parentNode.parentNode; // remonte TD -> TR
    alert( oParent.rowIndex);
  }
};

fichier de test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Délégation]</title>
</head>
<body>
<table id="id_table">
  <tr><td>Du texte</td><td><input type="text" class="update"></td></tr>
  <tr><td>Du texte</td><td><input type="text" class="update"></td></tr>
  <tr><td>Du texte</td><td><input type="text" class="update"></td></tr>
  <tr><td>Du texte</td><td><input type="text" class="update"></td></tr>
</table>
<script>
var oTable = document.getElementById('id_table');
oTable.onclick = function(e){
  e = e || event;
  var oSrc = e.target || e.srcElement;
  if( oSrc && oSrc.className == 'update'){
    var oParent = oSrc.parentNode.parentNode; // remonte TD -> TR
    alert( oParent.rowIndex);
  }
};
</script>
</body>
</html>