Lignes d'un tableau éditables

Ah oui d'accooooooord je viens de comprendre !
Il manque le bouton pour annuler les changements du coup ?

Comment cela avance ? Si tu continues à rencontrer des problèmes n'hésite pas dans le cas contraire pense à noter le sujet comme résolu. :)

Alors en fait, j'ai compris énormément de choses :
Voici le JSFIDDLE : https://jsfiddle.net/wqv47rab/1/

Simplement le premier code fonctionnais, a part que c'était tout le tableau et que la page se recharger malgré le type="button" ( Plus rien ne fonctionnais dans ce cas )
Mais avec le deuxième code rien ne marche !
Voilà si vous pouviez y jeter un coup d’œil merci à vous !

Code:

---

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

---

Mais tu crois vraiment que JavaScript va interpréter ton code PHP ? :weird:

Tout d'abord attention à bien comprendre ce que tu fais. Je pense qu'un petit tour sur la FAQ ne serait pas de trop pour toi. Enfin j'ai repris ta mise en page car je pense que le problème venait de la.

J'effectue une concordance entre le tableau d'affichage HTML et le tableau de donnée. Seulement il faut garder à l'esprit que ton tableau d'affichage contient deux lignes de plus que ton tableau de donnée.

De ce fait en retirant 2 à $tr.index() nous obtenons un fonctionnement normal.

cf: http://jsfiddle.net/ubqz4x6h/7/

J'ai relevé beaucoup de problème dans tes codes j'essaierais de reprendre ce que je peux quand j'aurais un peu plus de temps.

Merci à vous, car en effet je suis bête Bovino, JavaScript ne peut lire :

Code:

---

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

---

si je ne me trompe, je n'y avait même pas penser je ne sais même pas pourquoi je devait être concentrer à autre choses, sa m'apprendra !?

En tout cas Darkaurora, tout fonctionne correctement maintenant ! Mon code était mal écrit c'est ça ? :/ Je suis désoler je suis une quiche, mais comme conseiller je vais passer plus de temps à lire les FAQ et des cours, plutôt que de me casser la tête à comprendre les codes même si j'ai appris énormément !

Juste quand vous venez de me donner votre jsfidle j’étais justement entrain de coder la partie pour cacher les boutons mais évidemment rien ne marcher !
Maintenant j'ai compris pourquoi, car c'est vrai que le premier code était complétement inapte.

La seule chose qui me reste incomprise est ce fameux :

Code:

---

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

---

car malgré de multiples recherches je ne trouve pas d’exemples adaptés à la compréhension et j'aimerais vraiment comprendre, sinon je risque de pas bien dormir :lol: !

Car si je rentre les valeurs a la mains ( comme dans le jsfidle ) il me les remplace bien par les valeurs de var data et tout fonctionne.

J'ai également fait un

Code:

---

<?php  var_dump($data, json_encode(!empty($data) ? $data : array()));   ?>

---

Je retrouve bien les valeurs de mon tableaux.
Jusque là c'est bon je comprend or si je remplace

Code:

---

var data = [ Les valeurs à la mains ]

---

par

Code:

---

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

---

plus rien ne fonctionne ce que je pense normal, j'ai essayé une multitudes de choses ( Changer de variables, rajouter des variables, refaire des tableaux etc... ) Mais sans succès !

De plus enlever -2 à $tr.index() effectivement j'ai compris ce qui clocher, mais si je rajoute une ligne de plus, -2 ne fonctionne plus sa sera -3, seulement il faudrait pouvoir compter avant le nombre de lignes du tableau car le nombres de lignes peut varier ! de façons à enlever le nombres, de lignes que contient le tableau.

Merci beaucoup !

Pour passer un tableau PHP à une variable JS on utilise json_encode qui est une fonction PHP cf http://php.net/manual/en/function.json-encode.php.

Code:

---

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

---

est égale à

Code:

---

1 2 3 4 5

var data = <?php if (!empty($data)) {  echo json_encode($data); } else {  echo json_encode(array()); }?>

---

json_encode peut ne pas arriver à "encoder" ta variable PHP à ce moment la il te retourne une erreur cf http://php.net/manual/en/function.json-last-error.php & http://php.net/manual/en/function.js...-error-msg.php

La manière de procéder:

La première chose est de vérifier que le tableau est bien rempli avec un var_dump($data); bien sur tu ne le vérifie pas dans ta boucle mais une fois qu'elle est terminé et que toutes tes informations sont récupérer.

Si tu est satisfait de tes données alors juste après le var_dump tu peux faire directement un echo json_encode($data); cela devrait t'afficher une chaîne de caractère qui te paraîtras peut être étrange mais qui correspond à ton tableau PHP, pour preuve tu devrais retrouver les informations qui y sont.

Si tout va bien jusque là alors tu vas dans ton block javascript et en dessous de la déclaration var data = <?= json_encode(!empty($data ) ? $data : array()); ?> tu écris un console.log(data);il faut que data ressemble le plus possible à ce que j'ai écrit à la main dans le jsFiddle si ce n'est pas le cas essaye de me fournir l'architecture des données afin que l'on puisse rectifié.

Pour la suite de la problématique avec $tr.index() tu ne dois incrémenter ou décrémenter l'indice statique 2 que j'ai mit uniquement si ton tableau commence avec N ligne de présentation et non de donnée.

ton tableau a 2 lignes de présentation j'ai mit 2 en statique.

si tu souhaite faire quelque chose de plus dynamique il suffit de compter toutes les tr avec une classe contenu et tous les tr puis de faire la différence des deux:

Code:

---

$('table').find('tr').length - $('table').find('tr.contenu').length

---

Merci pour tes indications trés clair !

Pour le var_dump tout a l'air correct :

Code:

---

array(3) { [0]=> array(5) { [0]=> string(1) "0" [1]=> string(5) "17948" [2]=> string(1) "3" [3]=> string(16) "tp_arexx_17948_3" [4]=> string(12) "Chaufferie_T" } [1]=> array(5) { [0]=> string(1) "2" [1]=> string(5) "17946" [2]=> string(1) "3" [3]=> string(16) "tp_arexx_17946_3" [4]=> string(12) "Chaufferie_H" } [2]=> array(5) { [0]=> string(1) "4" [1]=> string(1) "l" [2]=> string(1) "l" [3]=> string(1) "l" [4]=> string(1) "l" } }

---

Pour le echo json_encode($data); voici ce que j'obtient :

Code:

---

[["0","17948","3","tp_arexx_17948_3","Chaufferie_T"],["2","17946","3","tp_arexx_17946_3","Chaufferie_H"],["4","l","l","l","l"]]

---

J'ai bien les valeurs de mon tableau.

Et enfin pour le console.log(data) voici ce que j'ai :

Code:

---

Array [ Array[5], Array[5], Array[5] ]

---

C'est correct non ?

Et pour le

Code:

---

$('table').find('tr').length - $('table').find('tr.contenu').length

---

ais-je le droit de faire :

Code:

---

$(this).find('center').text(data[$tr.index() - $('table').find('tr').length - $('table').find('tr.contenu').length][keyByIndex[index]]);

---

?

Merci encore !

Tu y es presque :D mais pour cette réponse je vais essayer de t'expliquer plutôt que de te donner le code tout fait :)

Tu récupère un tableau de tableau. Je le sais avant même que la console ne le dise car le résultat de json_encode est :

[["0","17948","3","tp_arexx_17948_3","Chaufferie_T"],["2","17946","3","tp_arexx_17946_3","Chaufferie_H"],["4","l","l","l","l"]]
Les tableaux sont formés délimités par des crochets "[]" et comme tu le sais tu accèdes a une valeur d'un tableau grâce à son indice par exemple:

console.log(data[0]); // ["0","17948","3","tp_arexx_17948_3","Chaufferie_T"]console.log(data[0][1]); // "17948"Ce que j'ai créer sur tous les jsfiddle que j'ai fais ce sont des objets. Les objets sont délimités par des accolades {} et pour accéder a une valeur d'un objet il suffit de le faire grâce à un indice spécial que l'on appelle "clé".

Code:

---

1 2 3 4 5 6

var data = [ {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'}, {'Arexx_index': 2, 'Arexx_Id': 17946, 'Arexx_Type': 3, 'Arexx_Table': 'tp_arexx_17946_3', 'Arexx_Name': 'Chaufferie_H'} ]; // data est un tableau contenant des objets console.log(data[0]) // Objet ou {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'} console.log(data[0]['Arexx_Id']); // 17946

---

On arrive maintenant à la partie critique:

J'ai écris:

Code:

---

1 2 3 4 5 6 7

var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index']; [...] $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - 2][keyByIndex[index]]); });

---

En fait ici la variable keyByIndex permet juste de faire une relation entre la clé qui nous est nécessaire pour "data" et l'indice qui nous est renvoyé par .each(function(index, elt) {...si nous sommes à la deuxième cellule "td" donc à la cellule d'index 1 (car on commence à 0), de la ligne "tr" alors keyByIndex[index] == 'Arexx_Name' et donc (si on suppose que $tr.index() -2 est égale à 0) data[$tr.index() - 2][keyByIndex[index]] est égale à "Chaufferie_T" car en fait on a "binder" data[0]['Arexx_Name'] !

Sachant que le tableau "data" n'est pas dans le même ordre que l'affichage que tu souhaites en faire, comment pourrais tu t'y prendre faire en sorte que cela fonctionne ?

Et pour le: $('table').find('tr').length - $('table').find('tr.contenu').length ce ne serait pas très optimiser de faire comme tu l’envisage cependant ça fonctionnerai.

Il existe une méthode qui te permettrais de récupérer toutes les lignes qui ne sont pas du contenu (.contenu) et qui est: $('table').find('tr:not(.contenu)').lengthLe problème est que ce code ça ne fonctionnera pas en toutes situation. Dans le cas ou tu souhaites créer un tableau HTML avec en alternance une ligne de contenu et une ligne d'information ou de présentation etc... ça ne marchera pas.

La meilleur solution nous la verrons demain :lol:

Après avoir relus 20 fois le message, je comprend qu'il serait plus judicieux de mettre mes données data dans l'ordre ?
Au lieu de changer l'ordre de keyByIndex ?

Ducoup j'ai quand même changer l'ordre de data :

Code:

---

Array [ "2", "Chaufferie_H", "17946", "3", "tp_arexx_17946_3" ]

---

c'a ma l'aiir correct mais ça n'a rien changer !

Pas de soucis pour la fonction

Code:

---

$('table').find('tr').length - $('table').find('tr.contenu').length

---

En fait si tu change l'ordre de data tu n'as plus besoin d'utiliser la variable keyByIndex:

Code:

---

1 2 3 4 5 6

var less =$('table').find('tr:not(.contenu)').length; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - less][index]); });

---

Si tu ne souhaites pas changer l'ordre de data alors tu utilises keyByIndex mais tu le remplis avec les indices de data dans l'ordre d'affichage de ton HTML:

Code:

---

1 2 3 4 5 6 7

var keyByIndex = [0, 5, 1, 2, 3, 4]; [...] var less =$('table').find('tr:not(.contenu)').length; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - less][keyByIndex[index]]); });

---

Juste quand tu m'a répondu j’étais entrain d'enlever le "keyByIndex", j'ai bien compris le principe !

Je viens juste de finir l'éssais avec, juste pour le kiff de la chose et sa marche impec !

Une petite explication du

Code:

---

.find('tr:not(.contenu)')

---

ce que l'on soustrait par la suite, effectivement pour la solution que je t'avait proposer au début, je l'avait déclarer dans une variable.
Tout marche impeccablement, je ne sait comment te remercier j'ai appris énormément et tout fonctionne, je met le sujet comme "résolu" avant de me replonger dans les bouquins car j'en est besoin.

Juste une précision, si je coche la checkbox que je clique sur le bouton pour modifier, puis annuler si je veut donc décocher la checkbox j'ai fait

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

if ($tr.hasClass('isEditable')) { $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove();   $(this).find('center').text(data[$tr.index() - less][index]);   });   $tr.removeClass('isEditable'); if(document.getElementById('squaredFour').checked){ document.getElementById('squaredFour').checked=false; } }

---

Cela fonctionne mais est-ce correct on va dire ?

Voilà en tout cas un très gros merci à toi !! :mrgreen:;):weird::P:ptdr:8-):mouarf::zoubi:

oui c'est tout a fait correct cependant quitte à utiliser jQuery autant le faire jusqu'au bout:

Code:

---

1 2 3

if ($('#squaredFour').is(':checked')) { $('#squaredFour').attr('checked', false); }

---

pour ce qui est du .find('tr:not(.contenu)') il s'agit d'un sélecteur qui dit que l'on cherche tout les tr qui N'ont PAS la classe contenu