IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tableau auto-extensible en utilisant modX


Sujet :

JavaScript

  1. #1
    Invité
    Invité(e)
    Par défaut Tableau auto-extensible en utilisant modX
    Salut tout le monde

    J'utilise actuellement le CMS ModX. Ce qui va expliquer pourquoi mon code parait un peu "bizarre"

    J'aimerais créer un petit tableau extensible à l'aide d'un clic sur un bouton. Ajouter une ligne à chaque clic quoi. Voilà le code, j'explique ensuite :

    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <input type="button" onclick="salarie.ajouterLigne();" value="Ajouter une ligne"/>
    <TABLE BORDER="1" align="center" id="tableau"> 
        <CAPTION><strong>Formations suivies pour s'adapter à l'évolution du contenu du poste ou au changement de poste</strong></CAPTION> 
        <TR>
            <TH> Numero</TH> 
            <TH> Intitulé</TH> 
            <TH> Organisme</TH> 
            <TH> Date</TH> 
            <TH> Durée (heures)</TH> 
            <TH> Eval. à chaud / à froid</TH> 
            <TH> Dispositif utilisé (plan de formation, DIF, CPF, VAE ...)</TH> 
        </TR> 
        <TR> 
            <TD><p id="formation_numero">
                <input type="text" name="formation_numero" id="formation_numero" value="[+formation_numero+]"  required />
            </p></TD>
            <TD> <p id="formation_intitule">
                <input type="text" name="formation_intitule" id="formation_intitule" value="[+formation_intitule+]"  required />
            </p></TD> 
            <TD> <p id="formation_organisme">
                <input type="text" name="formation_organisme" id="formation_organisme" value="[+formation_organisme+]"  required /> 
            </p></TD> 
            <TD> <p id="formation_date">
                <input type="text" name="formation_date" id="formation_date" value="[+formation_date+]"  required /> 
            </p></TD>
            <TD> <p id="formation_duree">
                <input type="text" name="formation_duree" id="formation_duree" value="[+formation_duree+]" required /> 
            </p></TD>
            <TD> <p id="formation_evaluation">
                <textarea name="formation_evaluation" id="formation_evaluation" >[+formation_evaluation+]</textarea> 
            </p></TD> 
            <TD> <p id="formation_dispositif_utilise">
                <input type="text" name="formation_dispositif_utilise" id="formation_dispositif_utilise" value="[+formation_dispositif_utilise+]"  required /> 
            </p></TD> 
        </TR> 
    </TABLE>

    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
    ajouterLigne: function() {
        var tableau = document.getElementById("tableau");
        var ligne = tableau.insertRow(-1);//on a ajouté une ligne
        var c, ch1;
    	ch1=document.createElement('input');
    	ch1.setAttribute('type','text');
    	ch1.setAttribute('name','formation_numero');
    	ch1.setAttribute('value', '[+formation_numero+]');
    	ch1.setAttribute('id','formation_numero');
    	ligne.appendChild(ch1);
        var colonne1 = ligne.insertCell(ligne.appendChild(ch1));//on a une ajouté une cellule
        var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
        var colonne3 = ligne.insertCell(2);
        var colonne4 = ligne.insertCell(3);
        var colonne5 = ligne.insertCell(4);
        var colonne6 = ligne.insertCell(5);
        var colonne7 = ligne.insertCell(6);
    }
    Vous pouvez donc voir que la première partie contient le tableau en lui-même. Et c'est dans la deuxième partie, conprenant le js, que j'ai un problème. En effet, avec modX, quand on remplis les values avec les placeholders ( '[+formation_numero+]' ceci quoi), l'input sera vide mais permettra ensuite un traitement de cette information. Je vous évite les détails, pour faire simple, ce placeholder me permet par la suite de récupérer la valeur qui sera affiché dans mon champ au travers d'une petite fonction. Ca ressemble à ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    valideEntretienPro: function() {
    	var infosformulaire = [];
    	// id fiche entretien
    	infosformulaire.include({'formation_numero': $('formation_numero').value});
    ....
    }
    En gros, si j'ai "test" dans mon champ, formation_numero comprendra comme valeur "champ". Je pense que vous avez compris ... enfin du moins ça parait assez compréhensible ^^

    Enfin du coup, mon problème est que lors du clic sur ajouter une ligne, bah j'ai '[+formation_numero+]' qui s'affiche dans mon champ. Et j'aimerais à la place que tous mes champs soit vides ...

    Avez-vous une idée ? merci d'avance
    Dernière modification par Invité ; 18/02/2015 à 15h25. Motif: oubli d'informations

Discussions similaires

  1. Réponses: 3
    Dernier message: 07/10/2014, 10h53
  2. [débutant] zone de texte auto extensible dans un état
    Par Anthony17 dans le forum Access
    Réponses: 2
    Dernier message: 07/06/2006, 17h07
  3. Zones de textes/Etiquettes/Boutons auto-extensibles
    Par Arkham46 dans le forum Contribuez
    Réponses: 1
    Dernier message: 31/05/2006, 11h31
  4. Colonnes auto-extensibles pour Excel?
    Par charleshbo dans le forum Excel
    Réponses: 2
    Dernier message: 10/05/2006, 22h00
  5. Réponses: 6
    Dernier message: 03/01/2006, 13h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo