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 :

Insertion/Suppression d'une ligne d'une TABLE


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Thermicien
    Inscrit en
    Août 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Thermicien
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2015
    Messages : 4
    Points : 3
    Points
    3
    Par défaut Insertion/Suppression d'une ligne d'une TABLE
    Bonjour,

    modifier le clonage de la cellule 1 de mon tableau à l’extérieur de celui-ci
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
     
    	<head>
    		<title>Ventilation</title>
     
    		<script>
    Code javascript : 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
    			/*
    			 * Variables globales
    			 */
    			var tableau = null;
    			var cellule = null;
    			var numLigne = 0;  // numLigne sera incrémenté à chaque nouvelle ligne
     
    			function init()
    			{
    				tableau = document.getElementById("tableau");
     
    				//1ère ligne du tableau
    				var ligne = tableau.children[1].children[0];
     
    				// 1ère cellule de la 1ère ligne : la la mémoriser dans cellule1, pour pouvoir la cloner ensuite
    				//cellule1 = ligne.children[0];
     
    				/*
    				 * Une variante + intéressante consiste à donner un id = à la cellule, par exemple <td id="cellule1">, et alors
    					cellule1 = document.getElementById("cellule1");
    				 */
    				 cellule1 = document.getElementById("cellule1");
    			}
     
    			function ajouterLigne()
    			{
    				var Cell;
    				var typePiece = document.getElementById("type_de_piece").value;
     
    				if (typePiece == "")
    					return alert("Choisir le type de pièce");
    				//var tableau = document.getElementById("tableau");
    				var ligne = tableau.insertRow(-1);//on a ajouté une ligne
    				numLigne++;
     
    				Cell = ligne.insertCell(0);//on a ajouté une cellule
    				Cell.innerHTML = ligne.rowIndex;//on y met le contenuCellule1 de numero
     
    				var colonne2 = Cell = ligne.insertCell(1);//on ajoute la seconde cellule
    				colonne2.innerHTML += document.getElementById("type_de_piece").value;
     
    				var colonne3 = ligne.insertCell(2);
    				/*
    				 * Ligne suivante remplacée par la recopie de la cellule mémorisée dans la fonction init()
    				 */
    				//colonne3.innerHTML += document.getElementById("Entrée d'air").value;//on ajoute la seconde cellule
    				remplirCellule(colonne3);
     
    				var colonne4 = ligne.insertCell(3);
    				colonne4.innerHTML += document.getElementById("Bouche d'extraction").value;//on ajoute la seconde cellule
     
    				var colonne5 = ligne.insertCell(4);
    				//Cell.innerHTML = ("<input type=button name=supprimer value=Supprimer onclick=suppression()>");  
    				var bouton = document.createElement("input");
    				bouton.type = "button";
    				bouton.value = "Supprimer";
    				bouton.onclick = function(){suppression(ligne)};
    				colonne5.appendChild(bouton);
    			}
     
    			/*
    			 * Remplir la cellule à l'identique de la cellule 1
    			 */
    			function remplirCellule(cellule)
    			{
    				/*
    				 * le paramètre true est nécessaire, pour que les fils soient aussi clonés
    				 */
    				var element = cellule1.cloneNode(true);
    				renommerIdEtName(element);
    				cellule.appendChild(element);
    				/*
    				 * L'élément peut avoir des fils : renommer aussi leur id et leur name
    				 */
    				renommerFils(element);
     
    			}
     
    			/*
    			 * 2 éléments ne doivent pas avoir le même id
    			 */
    			function renommerIdEtName(element)
    			{
    					if (undefined != element.id && element.id.length > 0)
    					{
    						element.id += ("_" + numLigne);
    					}
    					if (undefined != element.name && element.name.length > 0)
    					{
    						element.name += ("_" + numLigne);
    					}
    			}
     
    			function renommerFils(elementParent)
    			{
    				if (elementParent.childElementCount > 0) {
    					for (var i = 0; i < elementParent.childElementCount; i++)
    					{
    						element = elementParent.children[i];
    						renommerIdEtName(element);
    						/*
    						 * Recommencer récursivement, si le fils a aussi des fils
    						 */
    						renommerFils(element);
    					}
    				}
    			}
     
    			function suppression(ligne)
    			{
     
    				//var nb = document.getElementById('tableau').rows.length;
    				//document.getElementById('tableau').deleteRow(-1);
     
    				document.getElementById('tableau').deleteRow(ligne.rowIndex);
     
    				//Recomptage des lignes...
    				//var tableau = document.getElementById('tableau');
    				var trs = tableau.rows;
    				var n = trs.length;
    				var i;
     
    				for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
    				{
    				trs[i].cells[0].innerHTML = trs[i].rowIndex;
    				}
     
    			}
    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
    103
    104
    105
     
    		</script>
    	</head>
     
    	<body onload="init()">
     
    		<form method="post" action="">
    				<h2>Numéro de logement</h2>
    		Numéro de logement :	<input type ="text" name="numero_de_logement" id="numero_de_logement" />
    								<input type="button" id="bouton" onclick="ajouterLigne();" value="Nouveau_logement"/><br>
     
    				<h2>Type de logement</h2>
     
    						<label for="Type_de_logement">Type de logement : </label>
    							<select id = "Type_de_logement" onchange="change(this.options[this.selectedIndex].value);">
    								<option ></option>
    								<option value="T1">T1</option>
    								<option value="T2">T2</option>
    								<option value="T3">T3</option>
    								<option value="T4">T4</option>
    								<option value="T5">T5</option>
    								<option value="autre2">autre</option><br>	
    							</select> 
    								<input type="text" name="text_autre2" id="text_autre2"/><br>
     
    				<h2>Marque de la ventilation</h2>
     
    						<label for="Marque">Marque : </label>
    							<select id = "Marque" onchange="change(this.options[this.selectedIndex].value);">
    								<option ></option>
    								<option value="Aldes">Aldes</option>
    								<option value="Atlantic">Atlantic</option>
    								<option value="Paul">Paul</option>
    								<option value="Unelvent">Unelvent</option>
    								<option value="autre3">autre</option>
    							</select> 
    							<input type="text" id="text_autre3"/>
     
    						<label for="Nature">Nature : </label>
    							<select id = Nature onchange="change(this.options[this.selectedIndex].value);">
    								<option ></option>
    								<option value="Fixe">Fixe</option>
    								<option value="Autoréglable">Autoréglable</option>  
    								<option value="Hygroréglable">Hygroréglable</option>
    							</select><br>
     
    			<h2>Type de pièce contrôlée</h2>
     
    		Type de pièce : 		<select type="text" name="type_de_piece" id="type_de_piece" onchange="change(this.options[this.selectedIndex].value);">
    										<option ></option>
    										<option value="Séjour">Séjour</option>
    										<option value="Cuisine">Cuisine</option>
    										<option value="Salle de bain">Salle de bain</option>
    										<option value="Cabinet d'aisance">Cabinet d'aisance</option>
    										<option value="Cellier">Cellier</option>
    										<option value="Local technique">Local technique</option>
    										<option value="Chambre1">Chambre1</option>
    										<option value="Chambre2">Chambre2</option>
    										<option value="Chambre3">Chambre3</option>
    										<option value="Chambre4">Chambre4</option>
     
    								</select>
    								<input type="button" onclick="ajouterLigne();" value="Nouvelle_ligne"/>
     
     
    		</form>
     
     
     
    		<table name= "tableau" id="tableau" border="1"><br>
    			<caption>Ventilation simple</caption>
    			<thead>
    				<tr>
    					<th id="numero">numéro </th>
    					<th id="Type_de_piece">Type de pièce</th>
    					<th id="Entrée d'air">Entrée d'air</th>
    					<th id="Bouche d'extraction">Bouche d'extraction</th>
    					<th id="Supprimer">Supprimer</th>
    				</tr>
    			</thead>
    			<tbody>
    					<td id="cellule1"> 
    						<label for="Reference_de_l_entree_d_air">Référence de l'entrée d'air :</label><input type ="text" id ="Reference_Colonne2_ligne2"/><br>
    						<label for="Nombre_d_entree_d_air">Nombre d'entrée d'air :</label> <input type ="number" id ="Colonne3-ligne2"/><br>
    						<label for="Percement_des_mortaises :">Percement des mortaises : <br /> <input type="radio" name="Percement_des_mortaises" value="Oui"> Correct <br> <input type="radio" name="Percement_des_mortaises" value="Non"> Pas correct </form><br>
    						<label for="Detalonnage_des_portes :">Détalonnage des portes  : <br /> <input type="radio" name="Detalonnage_des_portes" value="Oui"> hauteur correct <br> <input type="radio" name="Detalonnage_des_portes" value="Non"> hauteur pas correct </form><br>
    					</td>
     
    					<td>
    						<label for="Nombre de d'entrée d'air">Référence de la bouche d'extraction d'air :</label><input type ="text" id ="bouche Colonne2-ligne2"/><br/> 
    						<label for="Dépression en amont de la bouche (Pa)">Dépression en amont de la bouche (Pa) :</label><input type ="text" id ="Dépression-Colonne2-ligne2"/><br/>	
    					</td>
     
    					<td>
    						<input type="button" value="Dupliquer" onclick="cloneEtVide(this.parentNode.parentNode) "/>
    					</td>
     
    					<td>
    						<input type="button" value="supprimer_la_ligne" onclick="deleteRow(this.parentNode.parentNode) "/>
    					</td>
    			</tbody>
    		</table>
     
    	</body>
    </html>

    Peut-être y a t-il d'autres solutions? Quelle est la meilleure façon de procéder.
    Merci.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut Insertion/Suppression d'une ligne d'une TABLE
    Bonjour,

    Pour commencer, comme les éléments sont dans une FORM on peut raisonnablement penser que c'est pour les transmettre au serveur, il faut donc utiliser des NAME et non des ID.

    Dans le cas de duplication de ligne, il est intéressant d'utiliser des NAME de la forme name="param[]", en effet si plusieurs éléments possèdent des NAME sous cette forme dans une FORM cela permet, coté serveur, de récupérer un tableau de données qui peut être traité grâce à l'utilisation d'une boucle.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
      // lecture individuelle
      echo $_POST['param'][0]; // affiche la valeur du 1st champ
      echo $_POST['param'][1]; // affiche la valeur du 2nd champ
     
      // utilisation dans une boucle
      foreach( $_POST['param'] as $value ) {
        echo $value;
      }
    Premier point donc la gestion des ID ne sert à rien.

    Pour la création d'une nouvelle ligne il existe bien sûr la construction via les méthodes du DOM, toujours efficace mais pouvant devenir très verbeuse voir fastidieuse.

    Une autre méthode, simple, consiste à créer la première ligne comme on la souhaite en final et au chargement de la page à réaliser un clone de cette ligne.

    La partie initialisation ressemblerait à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // variables globales
    var oTrClone,  // 1st ligne clonée
        oTbody;    // tBody pour ajout/suppression ligne   
     
    function init(){
      // récup. TABLE concernée
      var oTable = document.getElementById("tableau");
      // récup. TBODY pour ajout/suppression
      oTbody = oTable.tBodies[0];
      // création d'un clone de la 1st ligne
      oTrClone = oTbody.rows[0].cloneNode(true);
    }
    Pour ajouter une ligne il suffit alors d'ajouter au TBODY de la TABLE un clone de ce clone mais pas le clone lui-même, sous peine de perdre cette référence "vierge".
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function addLigne(){
      // Ajout d'un clone de la ligne clonée
      oTbody.appendChild( oTrClone.cloneNode(true));
    }
    Si l'on veut affecter un numéro de ligne chrono il suffit de parcourir les lignes du TBODY de la TABLE et d'affecter la valeur suivant l'indice dans la boucle.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function renumLigne(){
      var i,
          nbLig = oTbody.rows.length;
      // modification numéro de la ligne
      for( i=0; i < nbLig; i++){
       oTbody.rows[i].cells[0].innerHTML = i+1;
      }
    }
    Par la suite il suffit d'appeler cette fonction à chaque fois qu'une ligne est ajoutée, la fonction addLigne devient donc
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function addLigne(){
      // Ajout d'un clone de la ligne clonée
      oTbody.appendChild( oTrClone.cloneNode(true));
      // renumérotation  
      renumLigne();
    }
    Reste la suppression d'une ligne et pour cela on va mettre un BUTTON type="button" sur la ligne, type="button" pour éviter la soumission car le BUTTON est dans une FORM, en lui mettant une action sur l'événement onclick et en passant en paramètre l'objet lui-même via le mot clé this.

    Dans le cas de l'utilisation de la méthode cloneNode(true) les événements "ajoutés", via addEventListener par exemple, ne sont pas clonés. On pourrait bien sûr rajouter la gestion de l'événement dans la fonction addLigne pour séparer les différentes couches (CSS-HTML-JS) mais on reste ici sur du code simple.

    exemple d'ajout:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <td>
      <button type="button" onclick="delLigne( this)">Supprimer</button>
    </td>
    Coté ergonomie on notera, entre autres, que dans le cas de la suppression de la première ligne cela revient à effacer le contenu mais pas à la supprimer physiquement de l'affichage, donc on la supprime puis on en ajoute une qui sera donc vierge. Dans les autres cas on supprime et on renumérote.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function delLigne( obj){
      // récup. ligne concernée
      var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
      // suppression de la ligne
      oTbody.removeChild( oTr);
      // si il n'y a plus de ligne cela reviens à effacer
      if( !oTbody.rows.length){
        addLigne();
      }
      else{
        // renumérotation
        renumLigne();
      }
    }
    La totalité du script se résume donc à
    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
    // variables globales
    var oTrClone,  // 1st ligne clonée
        oTbody;    // tBody pour ajout/suppression ligne 
    function init(){
      // récup. TABLE concernée
      var oTable = document.getElementById("tableau");
      // récup. TBODY pour ajout/suppression
      oTbody = oTable.tBodies[0];
      // création d'un clone de la 1st ligne
      oTrClone = oTbody.rows[0].cloneNode(true);
    }
    function renumLigne(){
      var i,
          nbLig = oTbody.rows.length;
      // modification numéro de la ligne
      for( i=0; i < nbLig; i++){
       oTbody.rows[i].cells[0].innerHTML = i+1;
      }
    }
    function addLigne(){
      // Ajout d'un clone de la ligne clonée
      oTbody.appendChild( oTrClone.cloneNode(true));
      // renumérotation  
      renumLigne();
    }
    function delLigne( obj){
      // récup. ligne concernée
      var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
      // suppression de la ligne
      oTbody.removeChild( oTr);
      // si il n'y a plus de ligne cela reviens à effacer
      if( !oTbody.rows.length){
        addLigne();
      }
      else{
        // renumérotation
        renumLigne();
      }
    }
    Certes l'ergonomie a quelque peu été modifiée mais le but est de montrer une autre façon de faire, même si il y en a d'autres, et ce avec un code somme toute compact même si perfectible.

    Je tiens à préciser que nous avons travaillé sur une structure de type TABLE mais que le code est facilement adaptable à n'importe quelle autre structure.

    L'exemple complet :
    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
    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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Insertion/Suppression d'une ligne d'une TABLE</title>
    <meta name="Author" content="NoSmoking">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/ 1.5 Verdana, sans-serif;
    }
    #main {
      width: 60em;
      margin: 0 auto;
    }
    h1 {
      color: #069;
    }
    table {
      border-collapse:separate;
      border-spacing:1px;
      background:#888;
    }
    caption {
      padding: 1em;
      font-weight: bold;
      font-size: 1.25em;
    }
    th {
      background: #EEE;
      padding: .5em;
      text-shadow: 1px 1px 0px #FFF;
    }
    td {
      font-size: .8em;
      vertical-align: top;
      background: #FFF;
      padding: .5em 1em;
    }
    td input {
      margin-left: 1em;
    }
    td p {
      line-height: 1.5em;
      margin: 0 .5em 0.25em;
    }
    pre{
      background:#F2F6F8;
      font: 1em/ 1.5 "Courier New", monospace;
      text-shadow: 1px 1px 0px #FFF;  
      font-size: 1em;
      padding:0.25em;
    }
    .info{
      color:#888;
      font-size:.8em;
      margin:0.5em;
    }
    </style>
    <script>
    // variables globales
    var oTrClone,  // 1st ligne clonée
        oTbody;    // tBody pour ajout/suppression ligne 
     
    function init(){
      // récup. TABLE concernée
      var oTable = document.getElementById("tableau");
      // récup. TBODY pour ajout/suppression
      oTbody = oTable.tBodies[0];
      // création d'un clone de la 1st ligne
      oTrClone = oTbody.rows[0].cloneNode(true);
    }
    function renumLigne(){
      var i,
          nbLig = oTbody.rows.length;
      // modification numéro de la ligne
      for( i=0; i < nbLig; i++){
       oTbody.rows[i].cells[0].innerHTML = i+1;
      }
    }
    function addLigne(){
      // Ajout d'un clone de la ligne clonée
      oTbody.appendChild( oTrClone.cloneNode(true));
      // renumérotation  
      renumLigne();
    }
    function delLigne( obj){
      // récup. ligne concernée
      var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
      // suppression de la ligne
      oTbody.removeChild( oTr);
      // si il n'y a plus de ligne cela reviens à effacer
      if( !oTbody.rows.length){
        addLigne();
      }
      else{
        // renumérotation
        renumLigne();
      }
    }
    </script>
    </head>
    <body onload="init()">
    <div id="main">
      <form method="POST" action="#">
        <h2>Détails pièce contrôlée</h2>
        <button type="button" onclick="addLigne();">Ajouter une pièce</button>
        <table id="tableau">
          <caption>Ventilation simple</caption>
          <thead>
            <tr>
              <th></th>
              <th>Type de pièce</th>
              <th>Entrée d'air</th>
              <th>Bouche d'extraction</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <!-- ligne devant être clonée -->
            <tr>
              <td>1
              </td>
              <td>
                <select name="type_de_piece[]">
                  <option value="">...</option>
                  <option value="Séjour">Séjour</option>
                  <option value="Cuisine">Cuisine</option>
                  <option value="Salle de bain">Salle de bain</option>
                  <option value="Cabinet d'aisance">Cabinet d'aisance</option>
                  <option value="Cellier">Cellier</option>
                  <option value="Local technique">Local technique</option>
                  <option value="Chambre1">Chambre1</option>
                  <option value="Chambre2">Chambre2</option>
                  <option value="Chambre3">Chambre3</option>
                  <option value="Chambre4">Chambre4</option>
                </select>
              </td>
              <td>
                <p>Référence de l'entrée d'air</p>
                <p><input name="entree_air_reference[]" type="text"></p>
                <p>Nombre d'entrée d'air</p>
                <p><input name="entree_air_nombre[]" type="number"></p>
                <p>Percement des mortaises</p>
                <p><label><input name="percement_des_mortaises[]" value="Oui" type="radio"> Correct</label></p>
                <p><label><input name="percement_des_mortaises[]" value="Non" type="radio"> Incorrect</label></p>
                <p>Détalonnage des portes</p>
                <p><label><input name="detalonnage_des_portes[]" value="Oui" type="radio"> Hauteur correcte</label></p>
                <p><label><input name="detalonnage_des_portes[]" value="Non" type="radio"> Hauteur incorrecte</label></p>
              </td>
              <td>
                <p>Référence de la bouche d'extraction d'air</p>
                <p><input name="bouche_extraction_reference" type="text"></p>
                <p>Dépression en amont de la bouche (Pa)</p>
                <p><input name="bouche_extraction_depression" type="text"></p>
              </td>
              <td>
                <button type="button" onclick="delLigne( this)">Supprimer</button>
              </td>
            </tr>
            <!-- FIN ligne devant être clonée -->
          </tbody>
        </table>
      </form>
    </div> 
    </body>
    </html>

  3. #3
    Candidat au Club
    Homme Profil pro
    Thermicien
    Inscrit en
    Août 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Thermicien
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2015
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    Bonjour,

    Merci pour ces réponses !

    @NoSmoking

  4. #4
    Candidat au Club
    Homme Profil pro
    Thermicien
    Inscrit en
    Août 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Thermicien
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2015
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    Bonjour @NoSmoking,

    Je rencontre un problème sur les boutons à cocher qui ne sont pas indépendant entre chaque ligne.

    Bien cordialement

    Je continu à chercher la solution mais je prends toutes les bonne idées

    Stéphane

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Je rencontre un problème sur les boutons à cocher qui ne sont pas indépendant entre chaque ligne.
    c'est vrai que j'ai fait l'impasse là dessus mais toutes les billes sont présentes dans la réponse.

    Pour les radio il faut avoir des NAME de la forme name = "param[x]" donc il faut se servir de la fonction renumLigne() pour remettre les NAME à jour.

    Cela pourrait par exemple se faire de la façon suivante
    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
    function renameRadio( obj, num){
      var oInput = obj.getElementsByTagName('INPUT'),
          data, i, nb = oInput.length;
      for( i = 0; i < nb; i += 1){
        if( oInput[i].type === 'radio'){
          // récup. libellé      
          data = oInput[i].name.split('[');
          // on ne traite que ceux de la forme "nom[]"
          if( data[1] !== null){
            // affectation du NAME
            // ajout indice entre crochet        
            oInput[i].name = data[0] + '[' +num +']';
          }
        }
      }  
    }
    on passe en paramètres la TR (obj) concernée et son numéro de ligne (num).

    Il faut dans ce cas appeler la fonction dans la fonction renumLigne() qui devient donc
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function renumLigne(){
      var i,
          nbLig = oTbody.rows.length;
      // modification numéro de la ligne
      for( i = 0; i < nbLig; i+= 1){
        // ajout info dans 1st colonne
        oTbody.rows[i].cells[0].innerHTML = i+1;
        // renomme les INPUT type="radio"
        renameRadio(oTbody.rows[i], i);
      }
    }
    Là je crois que l'on a fait le tour !

    [EDIT] correction erreur dans le code

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 18/01/2015, 18h30
  2. Réponses: 4
    Dernier message: 24/11/2014, 12h12
  3. Récupérer une information d'une ligne dans une table
    Par Lebas dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 12/04/2013, 10h24
  4. Réponses: 4
    Dernier message: 15/10/2009, 13h33
  5. [VB6]créer une copie d'une ligne d'une table
    Par h82kev dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 01/02/2006, 16h08

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