Affecter une fonction à une cellule d'un tableauRésolu

Question

Bonjour,

J'ai un tableau HTML où je créer des lignes dynamiquement grâce au javascript.
Seulement pour certaines cellules, j'ai besoin d'affecter des fonction.

Normalement quand la cellule existe déjà (elle n'est donc pas créée dynamiquement), je la récupère de cette manière : <TD ondblClick="javascript:changeEtatCase(this);">

J'ai donc besoin pour les celulles créées dynamiquement d'affecter le ondlClick.
Je crée ma ligne comme ça : newRow = window.parent.opener.document.getElementById("monTab").insertRow((window.parent.opener.document.getElementById("montant").rowIndex)-1);
Ensuite je fais ma cellule : newCell = newRow.insertCell(1);

Mais comment affecter la fonction ensuite ?

Merci

PetoleTeam · Accepted Answer

Je viens de reprendre depuis le début !!! . Le PROBLEME viens du fait que tu intégres dans ta page popuptest.php le fichier js. Donc en mémoire, dans ta page popupTest.php, la fonction effectuée est celle du fichier js de la page,elle affecte une fonction qui lui est donc propre. Lorsque l'on la ferme, la fameuse fonction n'existe donc plus... La Solution, ne faire appel qu'aux fonction chargées dans la page test.htm et pour ce faire la fonction du fichier test.js FindID devient //----------------- function FindID(id){ return( document.getElementById(id)); } maintenant modifions le fichier popuptest.php comme suit 1/ tu vires qui ne sert à rien 2/ et l'appel à la fonction pour créer la ligne devient window.opener.ajoutLigne(...blalbla...) dans ce cas on utilise exclusivement le js de la page test.htm et la fonction existe donc bien... ;0)

ralecul · Answer

Salut,

Voilà un bout de code (non testé) qui doit marcher :

newCell =  newRow.insertCell(1);
 newCell. ondblclick  = function() {changeEtatCase(this);};


Henri

cs_chamallow · Answer

Tout d'abord merci pour ta réponse !

Mais elle ne fonctionne pas 

Alors j'ai fais plein de petits tests, peut-être que ça peut aider !

newCell.ondblClick =  function() {changeEtatCase(this);};    --> ne fais rien, et il n'y a pas d'erreur dans la console javascript
 newCell.ondblClick = function() {changeEtatCase(newCell);};     --> ne fais rien, et il n'y a pas d'erreur dans la console javascript
newCell.ondblClick  = setTimeout(function() {changeEtatCase(this);},100);  --> ne fais rien, et il n'y a pas d'erreur dans la console javascript
newCell.ondblClick =  setTimeout(function() {changeEtatCase(newCell);},100);  --> effectue bien la fonction changeEtatCase mais pour la dernière case de la ligne de mon tableau (la 7° au lieu de la 2° sur qui j'affecte la fonction). De plus, elle effecture directement la fonction sans que j'ai à double cliquer dessus 

Voilà la fonction  changeEtatCase  :
function changeEtatCase(cellule)
{
    element  = cellule; //On récupère la cellule qui a été double-cliquée
    element.innerHTML = ''; //Affichage d'un champ text pour la saisie
    alert(element.innerHTML); //Pour les tests ci-dessus
    setTimeout(function(){document.getElementById('saisie').focus();},100);
}

De plus, pour le dernier test que j'ai évoqué, il me dis que : Erreur : document.getElementById("saisie") has no properties . Je comprends pas parce que pour les cases et lignes que je ne crée pas dynamiquement, ça marche sans erreurs 

Merci pour l'aide !!!!

ralecul · Answer

Salut, Le code que j'ai proposé est tout à fait fonctionnel je pense que l'erreur doit provenir de la fonction de génération de ligne. Voici un bout de code (testé sous IE6 et Firefox) : ---- , , , Henri

cs_chamallow · Answer

Ok merci.

J'ai pas trop compris ta fonction sur FindId. Moi l'id du tableau je le connais, et pour la ligne à ajouter il faut qu'elle soit juste avant la ligne qui a pour identifiant "montantHT", ce qui me donne : 

function ajoutLigne(uneDesignation,unMontant,uneOperation,unTypeTaxe,unTypeElt,unIdentifiant,uneQte,unPUHT)
{
var newRow;
newRow =  window.parent.opener.document.getElementById("tabFacture").insertRow((window.parent.opener.document.getElementById("montantHT").rowIndex)-1);
  newRow.id = 'infoRep|' + unIdentifiant; 

cell1  = newRow.insertCell(0);
cell1.innerHTML =  uneDesignation;
 cell1.style.textAlign = "left"; 
cell2  = newRow.insertCell(1);
var cell2Text =  document.createTextNode(uneQte);
 cell2.appendChild(cell2Text);  
cell3  = newRow.insertCell(2);
cell3.headers =  "qtePosee";
 cell3.ondblClick = function() {changeEtatCase(cell3);}; 
cell4  = newRow.insertCell(3);
cell4.innerHTML =  unPUHT;
 cell5 = newRow.insertCell(4); 
cell5  = newRow.insertCell(5);
cell5.headers = "fte";
cell6 = newRow.insertCell(6);
}

Ca revient à peu près comme toi, sauf que moi ça marche pas 

Quand j'essaye de mettre un onClick simple, il me met : Erreur : uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindowInternal.alert]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost/chacal_intranet/devis/fctFacture.js :: anonymous :: line 217"  data: no]

Et pour le double clic : Erreur : uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindowInternal.alert]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost/chacal_intranet/devis/fctFacture.js :: anonymous :: line 217"  data: no]

La ligne s'insère bien, les cases sont bien créées avec les bonnes valeurs dedans, sauf que j'arrive pas à affecter la fonction.

Voilà merci

cs_chamallow · Answer

Sous IE (parce que là je testais sous Firefox pour voir la console javascript), ça ne marche pas mieux, et il ne veut même pas de ces lignes là : 
var cell2Text = document.createTextNode(uneQte);
cell2.appendChild(cell2Text);

ralecul · Answer

Deux mots : case sensitive !
cell3.ondblClick function() {changeEtatCase(cell3);}; -> cell3.ondblclick function() {changeEtatCase(cell3);};

 ondblClick ->  ondblclick et donc onClick -> onclick 

Sinon ya quoi à cette ligne 217 ? C'est bien beau de mettre les messages d'erreurs de la console javascript, 
mais avec la ligne correspondante dans le code c'est mieux... 

Sachant que le code que j'ai posté marche sous IE et Firefox je pense que celà suffit pour résoudre le problème...

Au passage : 
cell1.style.textAlign  = "left"; 
cell1.class =  "leftcell"; //Firefox
 cell1.className = "leftcell"; //IE 
A ma connaissance celà ne marchera pas avec IE6 il faut appliquer à la cellule une classe css (avec la propriété text-align left)
sinon IE ne saura pas appliquer le style correctement... (dans le CSS un truc du style : .leftcell {text-align: left;} )
cell1  = newRow.insertCell(0);
var cell1 =  newRow.insertCell(0);
Il vaut mieux utiliser une variable locale...
 cell3.ondblClick = function() {changeEtatCase(cell3);}; 
cell3.ondblclick  = function() {changeEtatCase(this);};
C'est plus zoli... surtout quand on re-utilise la variable cell3...
Henri

cs_chamallow · Answer

Ok, je savais pas pour la case sensitive, merci !

Donc maintenant je me retrouve avec deux erreurs : 
* Alors déjà en ligne 217, et bien y'a la ligne qui met le ondlbclick donc celle-ci : cell1.ondblclick =  function () {alert('click detecte');};
* Ensuite avec cette ligne :  cell3.ondblclick = function() {changeEtatCase(this);};  il me dis que changeEtatCase n'est pas définie.
Bon je continue de chercher, je vais bien y arriver quand même !

P.S : pour le cell1.style.textAlign  = "left", ça marche correctement sous Firefox, comme sous IE6

cs_chamallow · Answer

Je sais que ce que tu m'as mis marche, mais dès que j'essaye d'y mettre dans mon fichier ça ne fonctionne plus.
L'autre jour, j'ai eu un problème similaire toujours pour faire ce tableau dynamiquement, et en fait quand on testait le bout de code avec un tableau tout simple ça marchait, et dès qu'on repassait sur le mien, ça ne marchait plus. C'est parce que la ligne n'avait pas eu le temps d'être totalement créée, un truc dans le genre. On était trop rapide par rapport au navigateur.
Donc du coup j'avais ud mettre un setTimeout à l'appel de cette fameuse fonction.

Là quand je rajoute le setTimeout, et bien il ne me dis plus que changeEtatCase n'est pas définie, il rentre dans la fonction, par contre il plante car il me dit que document.getElementById("saisie") n'a pas de propriétés, or dans la fonction je fais bien : 
element.innerHTML = ''; //Affichage d'un
champ text pour la saisie

Voilà, je sais pas si ça peut éclairer sur mon problème, là je coince un peu.

Merci

cs_chamallow · Answer

Bonjour,

Je n'ai toujours pas réussi à résoudre mon problème. Je cherche et tourne toujours autant en rond.

J'ai réussi à régler (je crois) les problèmes d'exception : oui il fallait faire attention à la case, mais c'était onDblClick et pas ondlbclick.
En faisait plein de tests différents, je tombe sur des tests où je n'ai plus aucune erreur mais où rien ne se passe quand je double clique !

Donc pour l'instant je suis à ce point : 
function changeEtatCase(cellule)
{
    element =  cellule; //On récupère la cellule qui a été double-cliquée
     element.innerHTML = ''; //Affichage d'un champ text pour la saisie 
    setTimeout(function(){document.getElementById('saisie').focus();},1000);
}

function ajoutLigne(uneDesignation,unMontant,uneOperation,unTypeTaxe,unTypeElt,unIdentifiant,uneQte,unPUHT)
{
    var newCell;
    var newRow;

        newRow  = window.parent.opener.document.getElementById("tabFacture").insertRow((window.parent.opener.document.getElementById("montantHT").rowIndex)-1);
        var cell1 =  newRow.insertCell(0);
         cell1.innerHTML = uneDesignation; 
        var cell2  = newRow.insertCell(1);
        var cell3 =  newRow.insertCell(2);
         cell3.headers = "qtePosee"; 
        cell3.onDblClick  = setTimeout(function(){changeEtatCase(this);},100);
        var cell4 =  newRow.insertCell(3);
         var cell5 = newRow.insertCell(4); 
        var cell6  = newRow.insertCell(5);
        var cell7 = newRow.insertCell(6);
}
Les lignes rouges sont celles que je fais varier pour essayer de tomber sur ce que je souhaite, j'enlève les setTimeout, j'enlève les function devant l'appel des fonctions c'est-à-dire que j'appelle la fonction en mettant juste son nom (et pas le function devant donc), etc etc
J'essaye plein de choses mais je ne trouve pas la bonne solution.

Merci de votre aide!

cs_bultez · Answer

Bonjour,

    tableau.rows[n° ligne].on???"=function(){fonction(paramètres);};
        ajouter une fonction à une ligne
        par exemple : tableau.rows[0].onclick=function(){Appel(this);};

    tableau.rows[n° ligne].cell[n° colonne].on???"=function(){fonction(paramètres);};
        ajouter une fonction à une colonne
        par exemple : tableau.rows[0].cell[0].onclick=function(){Appel(this);};        

    ...

    si j'ai compris la question...
<hr />                                Cordialement                 Bul

cs_chamallow · Answer

Merci pour ta réponse.

Je le sais ça, mais je n'arrive pas à le faire fonctionner dans mon cas et je ne trouve pas pourquoi ...

cs_bultez · Answer

tu sais : c'est nickel. l'exemple proposé fontionne.
donc : on peut voir comment toi tu fais ?
( uniquement un extrait, un exemple, tout mais pas 95867 lignes )
<hr />
                        Cordialement             Bul

cs_chamallow · Answer

Je sais que l'exemple proposé fonctionne mais quand je le met avec mon tableau c'est une cata, ça marche plus. J'avais déjà eu ce style de problème où tu m'avais donné un exemple simple qui marchait et pas chez moi, et finalement quelqu'un avait dit d'utiliser un setTimeout parce que l'élément n'était pas fini de créer. Enfin bref ... Ca c'est la source générée : Situations Titre blabla Ensuite à l'aide du javascript et de PHP, j'ajoute des lignes dans mon tableau avant la ligne du montant hors taxe. Pour ça j'ai un bouton qui va m'ouvrir une autre fenêtre où le code c'est du PHP et qui me permet de saisir les différents éléments de ma nouvelle ligne. Quand je valide, j'appelle la fonction qui permet d'afficher ma novuelle ligne dans mon tableau. Tout cela fonctionne car je le fait parfaitement pour les lignes qui n'ont pas besoin que l'on surveille un éventuel double-clic. Pour les lignes qui ont besoin d'un double-clic, je crée la ligne et les cases en affectant le double-clic aux cases concernées : function ajoutLigne(uneDesignation,unMontant,uneOperation,unTypeTaxe,unTypeElt,unIdentifiant,uneQte,unPUHT) { //Fonction qui va ajouter l'élément au tableau. Elle prend en paramètre la désignation de l'élément, son montant, son mode de calcule, son type de taxe (ht ou ttc) et son identifiant (qui permettra d'identifier la ligne) : var newCell; var newRow; newRow = window.parent.opener.document.getElementById("tabFacture").insertRow((window.parent.opener.document.getElementById("montantHT").rowIndex)-1); newRow.id = 'infoRep|' + unIdentifiant; var cell1 = newRow.insertCell(0); cell1.innerHTML = uneDesignation; var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); cell3.onDblClick = setTimeout(function(){changeEtatCase(this);},100); var cell4 = newRow.insertCell(3); var cell5 = newRow.insertCell(4); var cell6 = newRow.insertCell(5); var cell7 = newRow.insertCell(6); } Et enfin voilà la fonction qui change la case double-cliquée : function changeEtatCase(cellule) { element = cellule; //On récupère la cellule qui a été double-cliquée element.innerHTML = ''; //Affichage d'un champ text pour la saisie setTimeout(function(){document.getElementById('saisie').focus();},1000); } Je ne met pas la fonction afficheSaisie car elle est trop longue, mais elle a toujours fonctionné pour les autres lignes non créées dynamiquement. Voilà, je ne sais pas si c'est suffisant, mais merci.

cs_chamallow · Answer

Pour plus de précisions, ma ligne est créée (elle doit ressembler à celle que de l'article 1 du code généré en exemple que j'ai mis dans le post précédent), les cases sont bien remplies par ce que j'avais demandé au moment de la création, mais par contre le double-clic ne marche pas.

Et quand je mets des alert dans la fonction qui crée la ligne et la fonction qui doit changer ma case, et bien les deux alertes se font bien mais au moment de la création de ma ligne. Je ne sais pas si c'est normal pour celui qui est dans la fonction qui est censée être appelée lors du double-clic, j'aurais pensé que l'alert ne se ferait que si je double cliquait et pas quand je créer ma ligne !

Merci

ralecul · Answer

Bonjour,


Serait-il possible d'avoir un exemple de fichier contenant la page HTML + le code JS qui ne fonctionne pas ?

(Pas des bouts de codes isolés : un exemple complet ! Ce n'est pas à
nous de refaire une page html de test avec le code HTML + JS...)


Sans une page de test correcte il n'est pas possible de faire mieux que
d'essayer de deviner et de faire tourner la boule de cristal de madame
Irma...


Voici donc ma prédiction : 

(voyons voir si je suis un bon devin...)


function ajoutLigne(uneDesignation,unMontant,uneOperation,unTypeTaxe,unTypeElt,unIdentifiant,uneQte,unPUHT)

{

    //Fonction qui va ajouter l'élément au tableau. 

    //Elle prend en paramètre la désignation de l'élément, son montant,
son mode de calcule, son type de taxe (ht ou ttc) et son identifiant
(qui permettra d'identifier la ligne) :

    var table =  FindID("tabFacture");

    var position = FindID("montantHT").rowIndex;

    var newRow = table.insertRow(position-1);    

    newRow.id = 'infoRep|' + unIdentifiant;

    var cell1 = newRow.insertCell(0);

    cell1.innerHTML = uneDesignation;

    var cell2 = newRow.insertCell(1);

    var cell3 = newRow.insertCell(2);

    cell3.ondblclick = function(){changeEtatCase(this);}; //ondblclick et non onDblClick !

    var cell4 = newRow.insertCell(3);

    var cell5 = newRow.insertCell(4);

    var cell6 = newRow.insertCell(5);

    var cell7 = newRow.insertCell(6);

}


//Permet d'obtenir l'élément dont l'identifiant est id de manière générique

//(pour tous les navigateurs donc)

function FindID(id)

{

    if(document.layers)

        return document.layersid;


    if(document.all && !document.getElementById)

        return document.allid;


    if(document.all && document.getElementById)

        return document.getElementById(id);

   

    if(!document.all && document.getElementById)

        return document.getElementById(id);

}

Afin que mon post serve à quelque chose :
cell3.onDblClick = setTimeout(function(){changeEtatCase(this);},100);
n'est pas correct pour plusieurs raisons :
 onDblClick ->  ondblclick
setTimeout(function(){changeEtatCase(this);},100); -> ne veut rien dire (pas tout à fait), mais ce code signifie que l'on va executer la fonction changeEtatCase dans 100ms et non qu'elle sera affectée à l'évenement ondblclick dans 100ms (car si on ne passe pas par une fonction anonyme function() il y a perte de contexte).
La version correcte est donc :cell3.ondblclick  = function(){changeEtatCase(this);


Henri

cs_chamallow · Answer

Merci pour ta réponse.

Pour la case du ondblclick, si j'ai mis les majuscules c'est parce que dans les manuels c'est avec les majuscules et parce que si je ne les mets pas, la console javascript me dis que ma fonction changeEtatCase n'est pas définie et ça plante.

Par contre j'ai fais un zip où j'ai mis des fichiers de tests pour que vous puissiez voir par vous-même (chez moi ça ne marche toujours pas). Donc j'ai tout épuré pour les tests, j'ai mis le fichier HTML où y'a le tableau posant problème, le fichier CSS, le fichier des fonctiosn javascript et le fichier permettant de saisir la nouvelle ligne (fichier php). Voilà il suffit donc de lancer la page HTML normalement.

Voilà le lien : test.zip

Merci pour votre aide

P.S : si j'ai pas fait de fichier de test auparavant, c'est parce que y'avais trop de choses en prendre en compte, mais finalement c'est bon.

cs_chamallow · Answer

Je me suis trompée sur le lien (enfin j'ai pas mis le lien direct) : essai.zip

Est-ce que l'erreur ne se produit que chez moi ? Quelqu'un voit-il une solution ?

Merci !

cs_chamallow · Answer

Mais pourquoi ça ne veut pas marcher ??!! 

J'ai beau essayer dans tous les sens, le ondblclick est jamais pris en compte

cs_chamallow · Answer

Bon j'ai épuré toutes mes pages de tests, en enlevant touts les ondblclick définies pour les lignes créées au même moment que la page, et j'ai gardé le strict nécessaire en fonction, c'est-à-dire celle qui permet de récupérer l'identifiant d'un élément et celle qui crée une ligne dynamiquement mais dans le ondblclick, je fais un alert cette fois.

Et bien même avec un truc si simple, le ondblclick n'est pas pris en compte, l'alert ne se fait jamais 
Quand je l'écris tout en minuscule, j'ai une exception qui se produit : Erreur : uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindowInternal.alert]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost/essai/test.js :: anonymous :: line 20"  data: no]

Et quand je mets les majuscules, et bien ils ne se passent plus rien.

C'est un ondblclick tout simple, alors pourquoi ça ne marche pas ?? Je comprends pas. Peut-être que ma case n'est pas encore tout à fait créer non ?

Merci

Affecter une fonction à une cellule d'un tableau

32 réponses

Votre réponse

Discussions similaires