Pb tableau dynamique

Résolu
Signaler
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
-
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
-
Bonjour,

J'aimerais créer un tableay dynamique, c'est-à-dire un tableau sans lignes au départ, dans lequel on peut rajouter des lignes vides et écrire dans les cases.

J'ai cherché sur le site et je suis tombé sur des post de forum et sources (notamment une source de Bultez), et je m'en suis inspirée.
Seulement je rencontre des petits problèmes. J'ai trouvé plusieurs codes plus ou moins compliqués, et j'ai donc essayer de faire simple (au cas où quelqu'un retouche après moi) :

<script language="javascript1.3">
            var nbLignes = 0;
           
            function AjoutLigne()
            {
                var nbCellules = 0;
                var newCell;
                nbLignes ++;

                var newRow = document.getElementById('tabFacture').insertRow(-1);
               
                for(nbCellules=0 ; nbCellules<7 ; nbCellules++)
                {
                    newCell = newRow.insertCell(nbCellules);
                    document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules].innerHTML = 'a';
                    document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules].ondblclick = function(){document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules].innerHTML = '';}
                }
            }
</script>
........................
[# Ajouter un repère]
Désignation des ouvrages |Qte |Qte
posée
|P.U.HT
?
|P.T.H.T
?
|%
Fté
|TOTAL
FTE ?
|

En fait, la ligne en rouge pose problème. Je voulais ajouter une fonction sur chaque case quand on double clique dessus (pour laisser apparaître un champ texte permettant de modifier la case), mais en fait il me dit que  document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules] n'a pas de propriétés, alors que je l'ai utilisé dans la ligne d'avant pour ajouter les 'a' dans les cellules !!

Quelqu'un voit ce que j'ai fais de travers ?? Sinon est-ce que je m'y prends bien ou j'utilise pas la bonne méthode pour faire ce que je souhaite ??

En attendant des réponses de votre part (merci d'ailleurs pour les réponses), je continue de chercher

35 réponses

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Bien le bonjour, je ne sais pas si ça peu t'aider mais ton traitement sur le ondblclick est faux ;o)
tu ne peux pas récupérer les infos nbLignes et nbCellules comme ça.


le plus simple c'est de faire un traitement plus générique :



document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules].ondblclick  = function (e){
   // Récupère la céllule sur laquelle on à fait double clique 
   var cell = (document.all)? event.srcElement : e.target;
   // ajoute le champs de saisie
   cell.innerHTML = ""


}

Ceci répond-il à ton besoin ?




[o-_-o]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
bonjour,
   tu as raison, dans la fonction qui est associée
      au double click on n'a plus accès ni à nbLignes, ni à nbCellules

   perso je ferais :

     var t=document.getElementById('tabFacture');
     t.rows[nbLignes].cells[nbCellules].ondblclick =
                  function(){this.innerHTML = '';}

<hr />
            cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
je ne vois pas trop l'intérêt mais ...
( et si j'ai compris ! )

<script type="text/javascript">
function remp(zone,cellule)
{
 cellule.innerHTML=zone;
}
var nbLignes = 0;
function AjoutLigne()
{
 var nbCellules = 0;
    var newCell;
    nbLignes ++;
    var newRow = document.getElementById('tabFacture').insertRow(-1);           
    for(nbCellules=0 ; nbCellules<7 ; nbCellules++)
    {
        newCell = newRow.insertCell(nbCellules);
  var t=document.getElementById('tabFacture');  
        t.rows[nbLignes].cells[nbCellules].innerHTML = 'a';
        t.rows[nbLignes].cells[nbCellules].ondblclick =
   function(){ quoi=this; this.innerHTML = '';}
    }
}
</script>

on doit, sans aucun doute pouvoir faire plus simple !

<hr />
            cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
je pensais que c'était terminé ici ?
il existe .rowIndex, qui donne le n° de ligne cliquée
un cht'tit exemple ?

<script type="text/javascript">
 function nl(q)
 {
  alert(q.rowIndex);
 }
</script>



onclick="nl(this.parentElement);">1.1, 1.2,
----
onclick=\"nl(this);\">1.1, 1.2

appel différent "bien entendu", si on prend click
( pour l'exemple ! ) sur le td ou le tr





<hr />
      cordialement   Bul    mon Site    M'écrire<hr />et dire que pour une autre manière de faire ....

<script type="text/javascript">
function AjoutLigne()
{
 var tableau=document.getElementById('tabFacture');
    var newRow = tableau.insertRow(-1);  
    for(nbCellules=0 ; nbCellules<7 ; nbCellules++)
    {
        tableau.rows[tableau.length-1].insertCell[nbCellules];
  tableau.rows[tableau.length-1].cells[tableau.indexRows.cells.length].innerHTML =
   '';
    }
}
</script>
[# Ajouter un repère]
 ----
Désignation des ouvrages |
  Qte |
  Qte
posée
|
  P.U.HT
?
|
  P.T.H.T
?
|
  %
Fté
|
  TOTAL
FTE ?
|

par exemple. ou tout autre "jeu" dans style sur onmouse? ou autre....
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Ouaisssss :) Ca marche, par contre au risque d'être chiante, tu peu m'expliquer un peu ? Parce que j'ai pas tout compris ...

(document.all)? event.srcElement : e.target; --> Ca veut dire quoi ça au juste (je me doute que tu récupère la cellule qui a générer l'évènement, mais c'est la syntaxe que j'ai pas trop compris)

Sinon merci pour la rpéonse :)
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Et j'ai oublié, pourquoi c'est faux exactement ?? Parce que je suis dans une fonction et donc j'ai plus accès à document.getElementById('tabFacture').rows[nbLignes].cells[nbCellules] ?? (surtout  nbLignes et nbCellules ?? ) Ou je dis n'importe quoi ?
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Ca marche aussi :)
Par contre si je veux mettre un onBlur sur le input pour que quand on sort du input, la valeur qui y a été saisie soit écrite dans la case (en supprimant le input, donc je retourne à une case normale), comment je fais pour dire que c'est telle case ??

this.innerHTML = '

J'ai essayé de lui passer directement la case mais ça marche pas (comme je m'en étais douté ), mais je trouve pas comment faire. Je sais pas si on peut accéder à la case à partir du input ...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
this.value, là, fonctionne parfaitement.
      t.rows[nbLignes].cells[nbCellules].ondblclick =
               function(){this.innerHTML = '';}
mis onclick pour le test
onblur n'est activé, avec IE, que si on clique ailleurs sur la page
sinon, voir la fonction afficheSaisie ?
<hr />
            cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Oups, ben en fait dans afficheSaisie, je voulais que ma case qui contienne le input, ne contiennent plus que la saisie (donc on voit plus le input, mais on voit la valeur de ce qui a été saisie dedans, en gros on repasse en case normale).
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Erf, j'ai oublié de dire des choses :p

En fait dès que l'on quitte la case, on la réaffiche normalement avec ce qu'on vient de saisir (d'où le passage en paramètre de this.value pour avoir la valeur), mais après j'arrive pas à y mettre dans la case (je vois pas comment la passer en paramètre).
Peut-être y'a une autre solution?
Messages postés
2378
Date d'inscription
lundi 4 février 2002
Statut
Membre
Dernière intervention
29 décembre 2012
19
En tout cas, si tu débute, tu rentres directement dans le bain.

Kan ce sera fini, y'aurait moyen d'avoir une démo ?? C'est un oeuvre collective ça !! LOL

S.
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Si je débutes en quoi ? En prog ?? Euh non, mais bon je suis loin d'en savoir autant que certains, et puis ce truc de tableau, jamais fait lol

Mais sinon mon truc risque pas d'être une merveille lol sauf pour la personne qui va l'utiliser (c'est déjà pas mal hein !)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
   et si j'ai compris, si la réponse est ok,
pourrait-on savoir pourquoi vouloir faire ça ?
<hr />
                              cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Bon alors j'ai pas encore essayé, mais sinon c'est pour faire une sorte d'excel ...

Un peu dans ce style (test la démo) : http://www.j0k3r.net/news-edition-inline-de-plusieurs-donnees-en-ajax-1477.html

Mais je voudrais y faire sans ajax, mais je voudrais le même principe pour le remplissage du tableau ... Tu vois mieux ce que je veux ??
Maintenant je vais tester ta réponse
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Alors je vois que t'as tout à fait compris, puisque ta solution marche :)

Moi j'essayais de passer directement le this dans la fonction et comme ça marchait pas, je me suis dis que le récupéré avant ça servirait pas à grand chose !! Ben même pas vrai lol
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
je n'ai pas été très clair ( comme souvent ! )  ma question était :
pourquoi, dans une cellule, mettre un texte...
qui sera remplacé par un input...
lui-même reremplacé par un texte ?
pourquoi ne pas simplement mettre, d'entrée, un input text ?
et le laisser ! par exemple !
<hr />
            cordialement      Bul       mon Site       M'écrire<hr />
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Ah ok désolée j'avais mal compris!

Parce que la personne va être amenée à changer les données etc etc, données enregistrées dans une base de données.
Donc la première fois, c'est sûr le tableau est vide, mais quand elle revient, il est rempli, et là elle peut changer des choses ...
C'est pour ça. C'est pas une bonne idée mon truc  ?? (même si c'est pas une idée de moi lol)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
quand au souci avec this...
this c'est "l'objet sur lequel on est", donc
function(){  this... = '';}

            this   c'est la cellule

            this   c'est l'input text


<hr />
            cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>C'est pas une bonne idée mon truc  ??

pourquoi ne pas simplement mettre, d'entrée, un input text  ??



<hr />
cordialement   Bul    mon Site    M'écrire<hr />
Messages postés
363
Date d'inscription
mercredi 18 mai 2005
Statut
Membre
Dernière intervention
29 janvier 2007
1
Hmm ok merci :) je me doutais, mais j'ai essayé de tricher en mettant des + pour voir si il prenait l'autre this lol enfin bref :) ça marche niquel !!

Et pour te donner plus de précision, le fait que l'input soit pas toujours visible, c'est pour éviter le fait que ça incite à la modification lol

En tout cas merci pour vos réponses même si je suis loin d'avoir fini !! :)