Discussion :

[lastarfane]

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

Un code vaut mieux que bavardage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[lastarfane]

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
questionnement de ma part en lisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[lastarfane]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SpaceFrog]

il y a aussi sans doute un souci de multiplicité d'id ...

[lastarfane]

le soucis vient sûrement d'ici :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Kaamo]

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

- 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.

[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

[Kaamo]

Grâce à l'attribut id de la cellule.

[lastarfane]

Eclaire moi un peu plus STP.

[SpaceFrog]

[Kaamo]

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

[lastarfane]

ok je mis met pour voir le result.

Merci je vous donnerai des nouvelles

[Kaamo]

J'ai commenté le Fiddle pour que tu comprennes mieux

[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.

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>