Ajouter un nouveau TR au dernier TR sur click

**Bionik6** · 19/04/2013, 15h15

Salut,

Je voudrais qu'à chaque fois que je cliques sur le bouton "Ajouter" avec l'id "Add", que le nouveau TR avec l'id "newRow" s'ajoute à mon table.

J'aimerai que le nouveau TR s'affiche à chaque click sur le lien "Ajouter" d'id "Add".

Merci de votre aide, en joint mon code

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
 
<!doctype html>
<html lang="fr-FR">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="../Dependencies/css/bootstrap.css"/>
      <link rel="stylesheet" href="../Dependencies/css/bootstrap-responsive.css"/>
</head>
<body>
 
<div class="container">
      <div class="row">
            <div class="span12">
                  <div class="hero-unit">
 
                        <table class="table table-bordered table-striped">
                              <form class="form-horizontal" action="addArticleprocess.php" method="post">
                                    <thead>
                                    <tr>
                                          <th>Désignation Articles</th>
                                          <th>Tonnage Article</th>
                                          <th>Quantité</th>
                                          <th>N° Containeur</th>
                                    </tr>
                                    </thead>
 
                                    <tbody>
                                    <tr>
                                          <td>
                                                <div class="controls">
                                                      <select name="article[]" id="article">
                                                            <?php foreach ( $result as $value ) : ?>
                                                                  <option value="<?= $value->designation; ?>"><?= $value->designation; ?></option>
                                                            <?php endforeach ?>
                                                      </select>
                                                </div>
                                          </td>
 
                                          <td>
                                                <div class="controls">
                                                      <input type="number" id="tonnage" placeholder="Entrer le tonnage" name="tonnage[]" required>
                                                </div>
                                          </td>
                                          <td>
                                                <div class="controls">
                                                      <input type="number" id="quantite" placeholder="Entrer la quantite" name="quantite[]" required>
                                                </div>
                                          </td>
                                          <td>
                                                <div class="controls">
                                                      <input type="text" id="container" placeholder="Entrer le numéro de container" name="container[]">
                                                </div>
                                          </td>
                                          <td>
                                                <a href="#" id="add"> Ajouter</a>
                                          </td>
                                    </tr>
 
                                    <tr id="newRow">
                                          <td>
                                                <div class="controls">
                                                      <select name="article[]" id="article">
                                                            <?php foreach ( $result as $value ) : ?>
                                                                  <option value="<?= $value->designation; ?>"><?= $value->designation; ?></option>
                                                            <?php endforeach ?>
                                                      </select>
                                                </div>
                                          </td>
 
                                          <td>
                                                <div class="controls">
                                                      <input type="number" id="tonnage" placeholder="Entrer le tonnage" name="tonnage[]" required>
                                                </div>
                                          </td>
                                          <td>
                                                <div class="controls">
                                                      <input type="number" id="quantite" placeholder="Entrer la quantite" name="quantite[]" required>
                                                </div>
                                          </td>
                                          <td>
                                                <div class="controls">
                                                      <input type="text" id="container" placeholder="Entrer le numéro de container" name="container[]">
                                                </div>
                                          </td>
                                          <td>
                                                <a href="#" id="add"> Ajouter</a>
                                          </td>
                                    </tr>
 
                                    </tbody>
 
                        </table>
                        <div class="form-actions">
                              <button type="submit" class="btn btn-primary">Save changes</button>
                              <button type="button" class="btn">Cancel</button>
                        </div>
                        </form>
                  </div>
 
            </div>
      </div>
</div>
 
<script src="../Dependencies/js/jquery-1.9.1.js"></script>
<script src="../Dependencies/js/bootstrap.js"></script>
<script src="../Dependencies/js/bootstrap-transition.js"></script>
<script src="../Dependencies/js/bootstrap-button.js"></script>
 
<script>
      $(document).ready(function () {
            var newRow = $('#newRow');
            newRow.hide();
            $('#add').on('click', function () {
                  $('tr:last').append(newRow);
       });
 
      });
</script>
</body>
</html>

**NoSmoking** · 19/04/2013, 15h18

Bonjour,
avant toute autre chose un ID DoIT UNIQUE

**Bionik6** · 19/04/2013, 15h27

Merci, j'avais pas vu ça, j'ai supprimé l'id du second lien qui se nommait aussi "add" mais le problème persiste toujours

**NoSmoking** · 19/04/2013, 19h46

Pour la méthode il te faut
- récupérer le parent TABLE
- faire un clone de la TR de référence ( newRow)
- ajouter le clone à la TABLE
- ne pas oublier de le montrer attendu que la TR de référence est masquée.

Cela peut se traduire par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function () {
  var newRow = $('#newRow');
  newRow.hide();
  $('#add').on('click', function () {
    // récupérer le parent TABLE
    var oTable = $(this).parents("TABLE");
    // faire un clone de la TR de référence
    var oElem = newRow.clone();
    // ajouter le clone à la TABLE
    oElem.appendTo( oTable);
    // ne pas oublier de le montrer attendu que la TR de référence est masquée.
    oElem.show();
  });
});

il ne te restera plus qu'à changer les ID et faire les aménagement que tu veux.

**danielhagnoul** · 19/04/2013, 23h10

Bonsoir

Une autre approche, voir les commentaires dans le code.

Pour tester, il suffit de copier-coller ma page de test.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					var jObjNewRow = $( "tr.newRow" ), // $( "tr.newRow" ).hide() sauf pour debug
						i = 0; // pour debug
 
					$( "a.add" ).on( "click", function(){
						var jObjClone = jObjNewRow.clone( true );
 
						jObjClone
							.removeClass( "newRow" )
							.find( "option" )
							.text( "option de tr clone" + ( ++i ) + " (pour test)" ); // pour debug
 
						$( "tr:last", "table.table" ).before( jObjClone );
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1333666/jquery/ajouter-nouveau-tr-au-dernier-tr-click/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<!--
/*
 * Attention à la structure du code HTML.
 * Emplacement du tag form.
 * Transformer tous les ID en class pour éviter
 * le problème de la duplication.
 */
-->
<div class="container">
	<div class="row">
		<div class="span12">
			<div class="hero-unit">
				<form class="form-horizontal" action="addArticleprocess.php" method="post">
					<table class="table table-bordered table-striped">
		            	<thead>
		                	<tr>
		                		<th>Désignation Articles</th>
		                		<th>Tonnage Article</th>
		                		<th>Quantité</th>
		                		<th>N° Containeur</th>
		                	</tr>
		                </thead>
		                <tbody>
		                	<tr>
								<td>
									<div class="controls">
										<select name="article[]" class="article">
											<option>option de tr 1 (pour test)</option>
										</select>
									</div>
								</td>
								<td>
									<div class="controls">
										<input type="number" class="tonnage" placeholder="Entrer le tonnage" name="tonnage[]" required>
									</div>
								</td>
								<td>
									<div class="controls">
										<input type="number" class="quantite" placeholder="Entrer la quantite" name="quantite[]" required>
									</div>
								</td>
								<td>
									<div class="controls">
										<input type="text" class="container" placeholder="Entrer le numéro de container" name="container[]">
									</div>
								</td>
								<td>
									<a href="#" class="add">Ajouter</a>
								</td>
							</tr>
							<tr class="newRow">
								<td>
									<div class="controls">
										<select name="article[]" class="article">
											<option>option de tr.newRow (pour test)</option>
		                                </select>
		                            </div>
		                       	</td>
		                       	<td>
		                       		<div class="controls">
		                       			<input type="number" class="tonnage" placeholder="Entrer le tonnage" name="tonnage[]" required>
		                            </div>
		                         </td>
		                         <td>
		                         	<div class="controls">
		                         		<input type="number" class="quantite" placeholder="Entrer la quantite" name="quantite[]" required>
		                            </div>
		                         </td>
		                         <td>
		                         	<div class="controls">
		                         		<input type="text" class="container" placeholder="Entrer le numéro de container" name="container[]">
		                         	</div>
		                         </td>
		                         <td>
		                         	<a href="#" class="add">Ajouter</a>
		                         </td>
		                     </tr>
		                 </tbody>
		             </table>
	             	<div class="form-actions">
	             		<button type="submit" class="btn btn-primary">Save changes</button>
	             		<button type="button" class="btn">Cancel</button>
	            	</div>
             	</form>
         	</div>
        </div>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-19T23:04:21.763+02:00" pubdate>2013-04-19T23:04:21.763+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Ajouter un nouveau TR au dernier TR sur click

jQuery

Discussions similaires

Partager

Partager