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 :

Création nouvelle ligne d'un tableau côté client


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Août 2010
    Messages
    1 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2010
    Messages : 1 019
    Par défaut Création nouvelle ligne d'un tableau côté client
    Bonjour à tous,

    J'ai trouvé un code javascript qui permet de créer des nouvelles lignes dans un tableau, côté client.
    J'aimerais l'améliorer mais c'est pas facile donc je suis à la recherche d'un peu d'aide.
    En fait actuellement la nouvelle ligne crée est composée de 5 colonnes avec l'élément "nouveau" écrit à l'intérieur.
    Je souhaite pouvoir écrire à l'intérieur de c'est colonne, changer les valeurs toujours côté client?

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <script language="javascript">
    function test()
    {
    	var maligne = document.createElement("tr");
    	var montexte = document.createTextNode("nouveau");
    	var macell = document.createElement("td");
    	macell.id="cel";
     
    	macell.appendChild(montexte);
    	maligne.id = "lgd"
        maligne.appendChild(macell);
    	var montexte = document.createTextNode("nouveau");
    	var macell = document.createElement("td");
    	macell.id="cel";
     
    	macell.appendChild(montexte);
    	maligne.id = "lgd"
        maligne.appendChild(macell);
    	var montexte = document.createTextNode("nouveau");
    	var macell = document.createElement("td");
    	macell.id="cel";
     
    	macell.appendChild(montexte);
    	maligne.id = "lgd"
        maligne.appendChild(macell);
    	var montexte = document.createTextNode("nouveau");
    	var macell = document.createElement("td");
    	macell.id="cel";
     
    	macell.appendChild(montexte);
    	maligne.id = "lgd"
        maligne.appendChild(macell);
    	var montexte = document.createTextNode("nouveau");
    	var macell = document.createElement("td");
    	macell.id="cel";
     
     
    	macell.appendChild(montexte);
    	maligne.appendChild(macell);
    	var montab = document.getElementById("tb");
    	montab.appendChild(maligne);
    	maligne.visibility="visible"
    }
    </script>
     
    <body id="b">
    <form name="frm" ID="f">
    <table border=1 ID="t">
    <TBODY ID="tb">
    <TR id="lg" align="center"><TD width="105"  bgcolor="61172d"><font face="Arial" color="white">1</font></td><td width="190">2</font></td><td width="180" >3</font></td><td width="100"><font face="Arial">4</font></td><td width="80"><font face="Arial">5</font></td></tr>
    </tbody>
    </table>
    <input id="bt_1" TYPE="button" 	VALUE="créer" onclick="test()">
    </form>

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Bonjour,

    il va falloir me virer tout ce HTML de présentation ! Les balises <font>, les attributs align, color, bgcolor, etc. La présentation c'est le domaine de CSS. Mets une balise <style> dans le haut de ta page et rassemble tous les styles à cet endroit, tu auras du HTML plus prorpre et ça te rendra la vie plus belle

    Par exemple :
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html lang=fr>
    <head>
       <meta charset=utf-8>
       <title>Ajout de lignes dans un tableau</title>
       <style type="text/css">
     
    body { font-family: Verdana, Helvetica, Arial, sans-serif; }
     
    table { border-collapse: collapse;
            text-align: center; }
     
    td { border: solid thin gray; }
     
    td:first-child { width: 105px;
                     background-color: #61172d;
                     color: white; }
     
    td:nth-child(2) { width: 190px; }
    td:nth-child(3) { width: 180px; }
    td:nth-child(4) { width: 100px; }
    td:nth-child(5) { width:  80px; }
     
       </style>
       <script type="text/javascript">
     
    ...
     
       </script>
    </head>
    <body>
     
    <form name="frm" id="f">
       <table id="t">
          <tbody id="tb">
             <tr id="lg">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
             </tr>
          </tbody>
       </table>
       <input id="bt_1" type="button" value="créer" onclick="test()">
    </form>
     
    </body>
    </html>

    Pour le script, je devine que tu as copié 5 fois le même bout de code. Tu vas avoir des conflits d'id, car un id doit être unique dans la page, et ton script génère plein de fois le même. Je te suggère de les retirer purement et simplement.

    Si j'ai bien compris ce que tu veux faire, tu voudrais que l'utilisateur puisse modifier le contenu des cellules, par exemple en cliquant desus puis en saissant du texte, c'est bien ça ? Si oui, je propose d'utiliser des <input> déguisés.

    Pour commencer, je te présente insertRow et insertCell qui vont te simplifier la vie. Ce sont des combos de createElement et appendChild.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var maligne = document.getElementById("tb").insertRow(-1);
    ...
    var macell = maligne.insertCell(-1);
    ...
    Et pour faire la même chose 5 fois de suite, ne fatigue pas tes doigts sur le clavier, utilise une boucle for :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    for (var i = 0; i < 5; i++) {
       var macell = maligne.insertCell(-1);
       ...
    }
    Je te laisse coller les bouts ensemble, tu verras que le code est déjà beaucoup plus court

    Ensuite, ce que je te suggère avec les <input> déguisés, c'est simplement d'ajouter un <input> dans chaque cellule à la place du texte "nouveau". Tu leur rajoutes un style pour retirer leur bordure, les rendre quasiment invisibles et donner l'impression que c'est la cellule qui est directement éditable :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    td input { border: none;
               color: inherit;
               background: inherit; }
    Et en bonus, tu leur mets un attribut placeholder qui est le texte par défaut quand l'utilisateur n'a pas encore saisi de texte dedans.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var $input = document.createElement("input");
    $input.type = "text";
    $input.placeholder = "Cliquer pour éditer…";
    Voilà, je t'ai quasiment tout donné, maintenant c'est à toi de jouer




    Pour la science je t'indique l'existence de l'attribut contentEditable. C'est quelque chose d'assez vieux mais je n'ai jamais vu personne s'en servir, alors j'en conclus qu'il y a un vice quelque part et qu'il vaut mieux s'en méfier… Peut-être que j'ai tort
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Citation Envoyé par Watilin Voir le message
    Pour la science je t'indique l'existence de l'attribut contentEditable. C'est quelque chose d'assez vieux mais je n'ai jamais vu personne s'en servir, alors j'en conclus qu'il y a un vice quelque part et qu'il vaut mieux s'en méfier… Peut-être que j'ai tort
    Pas spécialement, c'est juste que l'UI est tellement peu ordinaire et contre-intuitive que la plupart des utilisateurs passent complètement à côté, et donc les devs ne l'utilisent quasiment pas.

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Watilin
    mais je n'ai jamais vu personne s'en servir
    Teste l'écriture de message en mode WYSIWYG sur ce forum et tu ne pourras plus dire ça !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Août 2010
    Messages
    1 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2010
    Messages : 1 019
    Par défaut Création nouvelle ligne dans un tableau côté client
    Merci pour votre aide, je vais tester tout ça et je reviens vers vous.

Discussions similaires

  1. Réponses: 2
    Dernier message: 27/05/2013, 16h42
  2. Création nouvelle ligne
    Par seby3 dans le forum Macros et VBA Excel
    Réponses: 17
    Dernier message: 19/04/2012, 16h37
  3. Réponses: 0
    Dernier message: 21/06/2011, 10h14
  4. [XL-2007] Création nouvelle ligne dans excel lorsqu'un nom s'ajoute dans colonne A
    Par north_ dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 31/01/2010, 12h18
  5. Réponses: 3
    Dernier message: 05/05/2008, 12h00

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