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

 

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut Modifier les valeurs d'une ligne d'un tableau.

    Bonjour,

    J'ai un tableau avec des valeurs que j'ai récupéré dans ma BDD, il comporte plusieurs lignes.
    J'aimerais pouvoir cliquer sur une case du tableau, modifié sa valeur, et que si je valide, ça l'enregistre dans ma BDD.

    Avez-vous des idées de comment faire? Je ne cherche pas un code tout fait, je veux juste savoir vers quoi m'orienter.

    Ps: j'avais pensé à mettre un bouton modifier sur chaque ligne, et que ça me redirige vers une page ou il n'y a que la ligne que je souhaite modifier. Les valeurs de la ligne serait placer dans le placeholder des input, et comme ça je peux modifier ce qui m'intéresse. Sauf que je ne trouve pas ça opti du tout...

    En vous remerciant

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    Bonjour,

    C'est une question classique, qui a été posée 10000 fois.

    Ta méthode est bonne.
    Il suffit de mettre en paramètre l'id (auto-incrementé, donc unique) de la ligne.

    Exemple ici (boutons "supprimer" / "voir" / "modifier)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre émérite
    Avatar de Dendrite
    Femme Profil pro
    Développeuse informatique
    Inscrit en
    juin 2008
    Messages
    1 657
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeuse informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juin 2008
    Messages : 1 657
    Points : 2 650
    Points
    2 650
    Billets dans le blog
    5

    Par défaut

    Bonjour. De ce que j'avais compris, enterprise souhaitait un tableau éditable en ajax.
    Ci dessous, avec jquery :

    https://www.developpez.net/forums/d1...upprimer-ajax/
    Mes billets de blog : un billet = une problématique précise
    It's easier to be friends with lots of people online than one person in person!

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    Ça dépend comment on interprète :

    Citation Envoyé par enterprise Voir le message
    ...J'aimerais pouvoir cliquer sur une case du tableau, modifié sa valeur, et que si je valide, ça l'enregistre dans ma BDD...
    1- "case" = "cellule du tableau" (sous-entendu n'importe laquelle, contenant une valeur)
    Auquel cas Dendrite à raison.

    ... j'avais pensé à mettre un bouton modifier sur chaque ligne...
    2- "case" = "case à cocher", ou bouton (DANS une "cellule du tableau") (pour modifier une ligne entière, dans un autre fichier)
    Auquel cas j'ai raison.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Merci de vos réponse,

    j'ai regardé ce que vous m'avez envoyés tout les deux,
    et oui c'est ce que m'a proposé Dendrite qui correspond le plus à ce que je cherche, mais ça à l'air hyper compliqué.

    Je vais étudier ça

    Merci!

  6. #6
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    Ça dépend comment on interprète :



    1- "case" = "cellule du tableau" (sous-entendu n'importe laquelle, contenant une valeur)
    Auquel cas Dendrite à raison.



    2- "case" = "case à cocher", ou bouton (DANS une "cellule du tableau") (pour modifier une ligne entière, dans un autre fichier)
    Auquel cas j'ai à raison.

    Houla je pense que je me suis très mal exprimé alors, parce que c'est un mixte des deux que je veux... j'ai pas du être clair, vu ton explication, oui je cherche plus à faire ce que tu m'as proposé toi.

    Pour etre plus précis, j'affiche un tableau sur ma page web, et je veux que l'utilisateur, puisse modifier une valeur contenu dans le tableau (la valeur sur la quelle il va cliquer) et biensur, ça s'enregistre dans ma BDD

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    ...je veux que l'utilisateur, puisse modifier une valeur contenu dans le tableau (la valeur sur la quelle il va cliquer) et biensur, ça s'enregistre dans ma BDD...
    Si on précise "sans recharger toute la page",alors dans ce cas, c'est bien la méthode de Dendrite (via JS/Ajax) qui convient.

    Une autre téchnique (au lieu d'ouvrir une modale), est d'afficher directement un <input> dans la cellule du tableau.

    "table éditable"


    La difficulté... dépendra de ton niveau.



    N.B. la méthode que j'ai donnée est la plus "basique" (niveau débutant) , et ne nécessite ni JS ni Ajax.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    D'accord je vois!

    La méthode que tu m'as donné (le input) j'y ai pensé mais je trouve ça pas très propre...

    Eh bien comme je ne suis pas encore assez expérimenté en ajax et js, je vais m'orienter vers ce que tu me propose, et j'améliorerais la chose plus tard...

    Merci

  9. #9
    Membre émérite
    Avatar de Dendrite
    Femme Profil pro
    Développeuse informatique
    Inscrit en
    juin 2008
    Messages
    1 657
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeuse informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juin 2008
    Messages : 1 657
    Points : 2 650
    Points
    2 650
    Billets dans le blog
    5

    Par défaut

    Très sage décision.
    La méthode PHP only n'est pas la plus sexy, mais elle marche parfaitement et il ne faut à mon avis démarrer javascript et ajax (via jquery, c'est plus simple et plus sûr) que quand on maîtrise un minimum ce qui relève strictement de PHP...
    Bien distinguer ce qui agit sur le navigateur client (jquery) de ce qui relève du côté serveur (PHP).
    Le paradoxe, c'est que plus c'est simple et ergonomique pour l'utilisateur, plus ça demande du boulot côté code...
    Mes billets de blog : un billet = une problématique précise
    It's easier to be friends with lots of people online than one person in person!

  10. #10
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Merci!

    je posterai le résultat final une fois la chose terminé

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    Citation Envoyé par Dendrite Voir le message
    ...Le paradoxe, c'est que plus c'est simple et ergonomique pour l'utilisateur, plus ça demande du boulot côté code...
    Pas si paradoxale que ça.

    C'est comme la différence entre :
    • Un filet américain (préparé en cuisine : "prêt-à-manger")
    • Un steak tartare (qu'on doit préparer soi-même)

    Moins de boulot côté client = Plus de boulot côté cuisine...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Bonjour,

    Je n'ai pas réussi à faire ce que je voulais, car mes connaissance en JS sont trop faible...
    Cependant je pense avoir trouver une alternative, Bootstrap propose d'ouvrir une fenêtre grâce a "modal". et à l'intérieur, on peut mettre des Input!!! alors c'est pas sexy, mais c'est la seule solution que j'ai trouvé pour eviter le JS.
    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
    <!-- The Modal -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
     
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Modal Heading</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
     
            <!-- Modal body -->
            <div class="modal-body">
              <input type="texte" value="Modal body..">
            </div>
     
            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
     
          </div>
        </div>
      </div>
    PS: pour ceux qui veulent faire la même chose que moi mais qui sont plus doué que moi en JS, Jquery UI permet de faire un truc sympa.
    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
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    <script>
     
      $( function() {
     
        var dialog, form,
     
     
     
          // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
     
          emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
     
          name = $( "#name" ),
     
          email = $( "#email" ),
     
          password = $( "#password" ),
     
          allFields = $( [] ).add( name ).add( email ).add( password ),
     
          tips = $( ".validateTips" );
     
     
     
        function updateTips( t ) {
     
          tips
     
            .text( t )
     
            .addClass( "ui-state-highlight" );
     
          setTimeout(function() {
     
            tips.removeClass( "ui-state-highlight", 1500 );
     
          }, 500 );
     
        }
     
     
     
        function checkLength( o, n, min, max ) {
     
          if ( o.val().length > max || o.val().length < min ) {
     
            o.addClass( "ui-state-error" );
     
            updateTips( "Length of " + n + " must be between " +
     
              min + " and " + max + "." );
     
            return false;
     
          } else {
     
            return true;
     
          }
     
        }
     
     
     
        function checkRegexp( o, regexp, n ) {
     
          if ( !( regexp.test( o.val() ) ) ) {
     
            o.addClass( "ui-state-error" );
     
            updateTips( n );
     
            return false;
     
          } else {
     
            return true;
     
          }
     
        }
     
     
     
        function addUser() {
     
          var valid = true;
     
          allFields.removeClass( "ui-state-error" );
     
     
     
          valid = valid && checkLength( name, "username", 3, 16 );
     
          valid = valid && checkLength( email, "email", 6, 80 );
     
          valid = valid && checkLength( password, "password", 5, 16 );
     
     
     
          valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
     
          valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
     
          valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
     
     
     
          if ( valid ) {
     
            $( "#users tbody" ).append( "<tr>" +
     
              "<td>" + name.val() + "</td>" +
     
              "<td>" + email.val() + "</td>" +
     
              "<td>" + password.val() + "</td>" +
     
            "</tr>" );
     
            dialog.dialog( "close" );
     
          }
     
          return valid;
     
        }
     
     
     
        dialog = $( "#dialog-form" ).dialog({
     
          autoOpen: false,
     
          height: 400,
     
          width: 350,
     
          modal: true,
     
          buttons: {
     
            "Create an account": addUser,
     
            Cancel: function() {
     
              dialog.dialog( "close" );
     
            }
     
          },
     
          close: function() {
     
            form[ 0 ].reset();
     
            allFields.removeClass( "ui-state-error" );
     
          }
     
        });
     
     
     
        form = dialog.find( "form" ).on( "submit", function( event ) {
     
          event.preventDefault();
     
          addUser();
     
        });
     
     
     
        $( "#create-user" ).button().on( "click", function() {
     
          dialog.dialog( "open" );
     
        });
     
      } );
     
      </script>
     
    </head>
     
    <body>
     
     
     
    <div id="dialog-form" title="Create new user">
     
      <p class="validateTips">All form fields are required.</p>
     
     
     
      <form>
     
        <fieldset>
     
          <label for="name">Name</label>
     
          <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
     
          <label for="email">Email</label>
     
          <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
     
          <label for="password">Password</label>
     
          <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
     
     
     
          <!-- Allow form submission with keyboard without duplicating the dialog button -->
     
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
     
        </fieldset>
     
      </form>
     
    </div>
     
     
     
     
     
    <div id="users-contain" class="ui-widget">
     
      <h1>Existing Users:</h1>
     
      <table id="users" class="ui-widget ui-widget-content">
     
        <thead>
     
          <tr class="ui-widget-header ">
     
            <th>Name</th>
     
            <th>Email</th>
     
            <th>Password</th>
     
          </tr>
     
        </thead>
     
        <tbody>
     
          <tr>
     
            <td>John Doe</td>
     
            <td>john.doe@example.com</td>
     
            <td>johndoe1</td>
     
          </tr>
     
        </tbody>
     
      </table>
     
    </div>
     
    <button id="create-user">Create new user</button>
     
     
     
     
     
    </body>
     
    </html>

  13. #13
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    OK.

    Et donc..... ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #14
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Et donc rien, je voulais juste donner des possibilités au gens qui vont tomber sur le même problème.

    Je n'aime pas tomber sur des discussions qui on le même problème que moi et voir que la personne qui à posé la question ne dit pas ce qu'il a fait.

  15. #15
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    C'est bien d'avoir un "problème".
    C'est mieux d'avoir une "solution".

    1- Alors : QUELLE solution as-tu trouvée (et appliquée) ?

    2- Et si "résolu" :



    N.B. Pour ma part, je n'ai pas encore compris ce que tu voulais faire PRÉCISÉMENT.
    Ca reste flou et confus.

    Et je ne vois pas en quoi les scripts que tu montres (modale, jQuery UI), "répondent" à la problématique...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #16
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Alors au final, ce que je me proposais avec "modal" c'est pas pratique, car on ne peut cliquer sur le bouton et avoir la fenêtre qui s'ouvre, qu'une seule fois!

    Ce que j'ai fais, dans mon tableau les valeurs que je veux pouvoir modifier, je les ai mise dans un input avec readonly. En cliquant sur le bouton modifié, avec un peu de JS, j'enlève ce readonly et ça donne la possibilité de modifier la valeur

  17. #17
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    N.B. Pour ma part, je n'ai pas encore compris ce que tu voulais faire PRÉCISÉMENT....
    C'est parce que je me suis très mal exprimé.
    Le problème c'est que je ne sais pas comment le dire autrement je mettrais le script une fois fini, tu comprendras en voyant (j'espère)

  18. #18
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Alors voilà mon code, cependant comme je mets getElementByID je ne peux modifier que la première ligne!!! comme je peux faire pour que ça les modifie toutes?

    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
     
    <script type="text/javascript">
      function delete_attribute(){
        document.getElementById('date_deb').removeAttribute('readonly');
        document.getElementById('date_fin').removeAttribute('readonly');
      }
     
    </script>
     
    <table class="table table-bordered table-hover table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col"></th>
          <th scope="col">Nom de l'employé</th>
          <th scope="col">date de début</th>
          <th scope="col">date de fin</th>
          <th scope="col">souhait</th>
          <th scope="col">Commentaire</th>
          <th scope="col">type de congés</th>
          <th scope="col">statut</th>
          <th scope="col">validation</th>
        </tr>
      </thead>
      <tbody>
     
     
     
     
     
    <form method="post" action="demandes/accept_statut" id="formulaire"><tr>
     
              <td><input type="hidden"   name="id_dem" value="14">14</td>
              <td>employé2</td>
              <td><input type= "text" class="form-control" id="date_deb" value="2018-08-05" readonly="" ><button type="button" onclick="delete_attribute()">Modifier</button></td> 
              <td><input type= "text" class="form-control" id="date_fin" value="2018-08-05" readonly="" ></td> 
              <td>souhait 1/1</td>
              <td></td>
              <td>RTT</td>
              <td>annuler</td>
              <td>
    <div class="form-group">
         <select class="form-control" name="types_demande" id="types_demande" required>
     <option value="">Choisir le type</option>
     <option value="1">RTT</option>
    <option value="2">Maladie</option>
    <option value="3">Sans solde</option>
    <option value="4">congés payés</option>
    <option value="5">non défini</option>
    </select>
     
    <div class="form-group">
     	<select class="form-control" name="statut" id="statut" required>
     <option value="">Choisir le statut</option>
     <option value="1">accepter</option>
    <option value="2">refuser</option>
    <option value="3">attente</option>
    <option value="4">annuler</option>
    <option value="5">annulation</option>
    </select>
    </div>
     
    <button type="submit" class="btn btn-primary">Valider</button>
    </form></td>
     
    </tr>
     
    <form method="post" action="demandes/accept_statut" id="formulaire"><tr>
     
              <td><input type="hidden"   name="id_dem" value="15">15</td>
              <td>employé</td>
              <td><input type= "text" class="form-control" id="date_deb" value="2018-07-14" readonly="" ><button type="button" onclick="delete_attribute()">Modifier</button></td> 
              <td><input type= "text" class="form-control" id="date_fin" value="2018-07-14" readonly="" ></td> 
              <td>souhait 1/1</td>
              <td></td>
              <td>non défini</td>
              <td>annulation</td>
              <td>
    <div class="form-group">
         <select class="form-control" name="types_demande" id="types_demande" required>
     <option value="">Choisir le type</option>
     <option value="1">RTT</option>
    <option value="2">Maladie</option>
    <option value="3">Sans solde</option>
    <option value="4">congés payés</option>
    <option value="5">non défini</option>
    </select>
     
    <div class="form-group">
     	<select class="form-control" name="statut" id="statut" required>
     <option value="">Choisir le statut</option>
     <option value="1">accepter</option>
    <option value="2">refuser</option>
    <option value="3">attente</option>
    <option value="4">annuler</option>
    <option value="5">annulation</option>
    </select>
    </div>
     
    <button type="submit" class="btn btn-primary">Valider</button>
    </form></td>
     
    </tr>

    et donc enfaite, ce tableau affiche toute les demandes de congés faites par les employés, avec la date de début et de fin. Le tableau permet au RH de valider ces demandes, mais je voulais que les RH puisse modifier la date.

  19. #19
    Modératrice
    Avatar de Celira
    Femme Profil pro
    Développeuse PHP/Java
    Inscrit en
    avril 2007
    Messages
    7 956
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : Développeuse PHP/Java
    Secteur : Industrie

    Informations forums :
    Inscription : avril 2007
    Messages : 7 956
    Points : 16 091
    Points
    16 091

    Par défaut

    Le principe de base de l'attribut id, c'est d'être un identifiant unique. Tu ne peux donc avoir qu'un seul élément portant un id donné dans une page HTML.
    Donc getElementById prend le 1er élément qu'il rencontre et ne va pas chercher plus loin, étant donné qu'il n'est pas censé y en avoir un 2e.

    Ce que tu peux avoir en revanche, ce sont des champs de formulaires qui portent le même attribut name, à condition qu'ils se trouvent dans des formulaires différents. Tu peux alors utiliser getElementsByTagName pour les retrouver tous et les modifier comme tu veux.

    Mais ça, c'est du Javascript pur, ce serait peut-être une bonne idée d'aller poser une nouvelle question dans le forum Javascript.
    Modératrice PHP
    Aucun navigateur ne propose d'extension boule-de-cristal : postez votre code et vos messages d'erreurs. (Rappel : "ça ne marche pas" n'est pas un message d'erreur)
    Cherchez un peu avant poser votre question : Cours et Tutoriels PHP - FAQ PHP.

    Affichez votre code en couleurs : [CODE=php][/CODE] (bouton # de l'éditeur) et [C=php][/C]

  20. #20
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2018
    Messages : 88
    Points : 42
    Points
    42

    Par défaut

    Bonjour Celira,

    Pour getElementById je m'en suis rendu compte après,
    et du coup j'avais voulu utiliser getElementsByClassName car il rend une liste et non pas un élément, le problème c'est que il ne suffit pas de juste changer ça, et je ne sais pas ce qu'il faut faire de plus...

    j'ai testé ça mais ça n'a pas marcher...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function test(){
      var lst = document.getElementsByClassName('date_deb')
      for (var k in lst) {
        lst[k].removeAttribute('readonly');
    }
     
    }
    Et j'ouvre une nouvelle question sur le forum Javascript alors?

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [Python 3.X] Extraire les valeurs d'une ligne d'un tableau excel avec python 34
    Par pascaljqt dans le forum Général Python
    Réponses: 8
    Dernier message: 08/05/2016, 20h35
  2. Réponses: 1
    Dernier message: 05/05/2009, 10h40
  3. [AC-2007] Alimenter une Liste par les valeurs d'une ligne
    Par curt dans le forum IHM
    Réponses: 11
    Dernier message: 19/04/2009, 12h00
  4. Réponses: 3
    Dernier message: 07/01/2009, 16h17
  5. Réponses: 5
    Dernier message: 12/10/2007, 10h06

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