Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : Affecter une fonction à une cellule d'un tableau [ JavaScript Orienté objet (POO) / Evènements ] (chamallow)

mercredi 17 janvier 2007 à 17:19:40 | Affecter une fonction à une cellule d'un tableau

chamallow

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


mercredi 17 janvier 2007 à 17:57:47 | Re : Affecter une fonction à une cellule d'un tableau

ralecul

Salut,

Voilà un bout de code (non testé) qui doit marcher :

newCell = newRow.insertCell(1);

newCell.ondblclick = function() {changeEtatCase(this);};

Henri

jeudi 18 janvier 2007 à 08:33:25 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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 = '<input type="text" id="saisie" onblur="afficheSaisie(this.value,element);" />'; //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 !!!!

jeudi 18 janvier 2007 à 09:55:50 | Re : Affecter une fonction à une cellule d'un tableau

ralecul

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

<script type="text/javascript">
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);
}

function addRow(id)
{
    var table = FindID(id); //table = document.getElementById(id)
    var lastRow = table.rows.length;
    var row = table.insertRow(lastRow);

    //création de la première ligne
    //cellule 1
    var cell1 = row.insertCell(0);
        cell1.onclick = function () {alert('click detecte');};
    var cell1Text = document.createTextNode('1');
        cell1.appendChild(cell1Text);
    //cellule 2
    var cell2 = row.insertCell(1);
        cell2.ondblclick = function () {alert('double click detecte');};
    var cell2Text = document.createTextNode('2');
        cell2.appendChild(cell2Text);        
    //cellule 3
    var cell3 = row.insertCell(2);
        cell3.ondblclick =  function() {changeEtatCase(this);};
    var cell3Text = document.createTextNode('3');
        cell3.appendChild(cell3Text);                
       
}
function changeEtatCase(cellule)
{
    element = cellule; //On récupère la cellule qui a été double-cliquée
    element.innerHTML = '<input type="text" id="saisie" onblur="afficheSaisie(this.value,element);" />'; //Affichage d'un champ text pour la saisie
    alert(element.innerHTML); //Pour les tests ci-dessus
    setTimeout(function(){document.getElementById('saisie').focus();},100);
}
</script>

<table id=maTable style="border: 1px solid black;">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<input type="button" onclick="addRow('maTable')" value="addRow"/>

Henri

jeudi 18 janvier 2007 à 10:33:32 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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

jeudi 18 janvier 2007 à 10:39:33 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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

jeudi 18 janvier 2007 à 11:24:38 | Re : Affecter une fonction à une cellule d'un tableau

ralecul

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

jeudi 18 janvier 2007 à 11:39:27 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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

jeudi 18 janvier 2007 à 14:47:54 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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 = '<input type="text" id="saisie" onblur="afficheSaisie(this.value,element);" />'; //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

mardi 23 janvier 2007 à 10:09:21 | Re : Affecter une fonction à une cellule d'un tableau

chamallow

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 = '<input type="text" id="saisie" onBlur="afficheSaisie(this.value,element);" />'; //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!


1 2 3 4

Cette discussion est classé dans : fonction, tableau, cellule, dynamiquement, affecter


Répondre à ce message

Sujets en rapport avec ce message

Peut on modifier une cellule d'un tableau ??? [ par webgagner ] Est-il possible de modifier le contenu d'une celulle d'un tableau apres clic sur un bouton de la celule voisine??? Passage de tableau en paramètre d'une fonction [ par Mask ] Je génère un tableau nommé "Tab"contenant des nombres en PHP....jusqu'ici tout va bien: mon tableau se rempli des valeurs souhaitées.Ensuite je veux f Passage de tableau en paramètre d'une fonction [ par Mask ] Y a t il des subtilités à connaitre quant au passage passage de tableaux en paramètre pour des fonctions par rapport au passage de chaînes de caractèr Couleur d'une cellule d'un tableau html [ par ypothier ] Est-ce que quelqu'un pourrai m'aider. J'ai un tableau HTML bien simple. Mais j'aimerai être capable de modifier la class à laquel il appartient dans u Dimensionnement d'une cellule [ par Jos ] Bonjour, J'aimerais définir dynamiquement la largeur d'une cellule de tableau, selon la taille de la fenêtre du visiteur. Je réussi à le faire, cep tableau avec tri dynamique [ par rcedric ] Salut a tous,voila mon probleme; je cherche à afficher un tableau et que lorsqu l'on clic sur le libellé le tableau est trié et réafficher dynamiqueme Cellule tableau de taille variable en tps réel [ par cricridebordeaux ] Mon problème :J'ai un tableau de saisie d'informations dans un formulaire dans lequel un autre tableau contient des infos annexes. Le premier gonffle clic droit sur une cellule d'un tableau [ par manutu ] salut a vous tousJe travaille sur un projet et j'aimerais gérer créer une fonction javascript qui ouvre un menu sur un click droit sur une cellule pré Créer un tableau dynamiquement [ par RazielReaver ] Salut à tous,Je cherche la solution pour créer plusieurs tableaux dynamiquement.J'aiun script php qui liste les rep d'un dossier et qui créé la liste récurération de la valeur d'une cellule d'un tableau créer dynamiquent à partir d'une base de données [ par brandon ] Bonjour, alors voila mon problème :je crée un tableau à partir d'une base de données mysql de la façon suivante :$requete="SELECT * FROM intervention


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 3,323 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.