insert tr dans un tableau

**pmoury06** · 21/10/2013, 20h40

Bonjour,

je dois créer des lignes de tr sous le tr ou je suis

j'ai bien trouvé en jquery

Code :

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

$('#matable tbody>tr:last').clone(true).insertAfter('#matable tbody>tr:last');

mais cela me met le nouveau tr à la fin

Ce que je veux c'est si j'ai 5 lignes et que je clique sur la 3eme ligne cela rajoute le nouvelle en 4ème
et je voudrais également supprimé les valeur de mes inputs qui son cloner

merci

**danielhagnoul** · 22/10/2013, 00h32

Bonsoir

C'est logique ! Avec "tbody > tr:last" on travaille toujours sur la dernière ligne du tbody.

Code :

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

1
2
3
$( "#maTable tbody > tr" ).on( "click", function(){
    $( "<tr></tr>" ).insertAfter( this );
});

**pmoury06** · 23/10/2013, 09h50

Merci cela fonction par contre, dans ma ligne de tr rajouter , j'ai un input text
sur lequel sur document ready j'applique un masque de saisie (téléphone)
comment je peut faire pour l'appliquer sur ma page

Code :

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

1
2
3
jQuery(function($){
   $("#vendeur1_dom").mask("99.99.99.99.99");
})

par contre lors que j'ajoute une ligne je fais :

Code :

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

1
2
3
4
5
$.each($('#tabindivision tbody>tr input'), function() {
	if ($(this).attr('id')=='indiv_tel'){
		$(this).mask("99.99.99.99.99");
	}
});

elt la cela ne marche pas

une idée

**danielhagnoul** · 23/10/2013, 13h12

Bonjour

En HTML5 ? Exemple :

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
<!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://d3js.org/d3.v3.min.js",
			//"http://code.jquery.com/jquery-2.0.3.min.js",
			//"http://code.jquery.com/jquery-2.1.0-beta1.js",
			"http://code.jquery.com/jquery-1.8.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
$( "#maTable tbody > tr" ).on( "click", function(){
    $( '<tr><td>Hello</td><td><input type="tel" pattern="^[0-9]{2}\.[0-9]{2}\.[0-9]{2}\.[0-9]{2}\.[0-9]{2}$" placeholder="numéro de téléphone" title="ex: 99.99.99.99.99" required autofocus></td></tr>' ).insertAfter( this );
});
 
$( "form" ).on( "submit", function(){
	return false;
});
 
 
});
 
$( 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 à 10 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<form>
	<table id="maTable">
		<tbody>
			<tr>
				<td>Un</td>
				<td>Deux</td>
			</tr>
		</tbody>
	</table>
	<input type="submit" value="Soumettre">
</form>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-10-18T15:50:23.583+02:00" pubdate>2013-10-18T15:50:23.583+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>

insert tr dans un tableau

jQuery

Vue hybride

Discussions similaires

Partager

Partager