clone de TR dans IE7

**pdelorme** · 21/12/2012, 15h14

Bonjour,

je souhaite rajouter une ligne dans un tableau en me calquant sur la dernière ligne du tableau.
pour ce faire j'utilise la fonction clone() de jQuery puis je modifie les attribut qui doivent différer...
Mon code ressemble à ca :

Code :

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

1
2
3
4
5
6
7
8
9
 
var nbLines = $('#rfqItems tr').length-2;
//clone last row to variable
var lastRow = $('#rfqItems tbody>tr:last');
var row = lastRow.clone(false);
// replace values :
var index = nbLines;
row.attr("id","item"+index);
...

hors, alors que tu va bien sous chrome firefox, IE 8 et 9... cela ne marche pas sur IE7 et je me retrouve avec 2 lignes lastRow et row sont toutes les deux avec le nouveaux id... comme si les deux lignes étaient en fait les mêmes (en terme de référence)...

j'ai vu plusieurs topic parlant de ca mais je n'ai pas trouvé la solution qui duplique et "sépare" les lignes.

des pistes ???

Merci,

P.

**Bovino** · 21/12/2012, 15h39

Aucun problème avec IE sur ce code :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Add row</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<button id="addRow">Ajouter une ligne</button>
	<table>
		<tr id="row0">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row1">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row2">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row3">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row4">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
	</table>
	<script>
                $('table').on('click', 'tr', function(){
                        alert(this.id);
                });
                $('#addRow').on('click', function(){
                        var lastRow = $('tr:last');
                        var row = lastRow.clone(false);
                        var nb = lastRow.attr('id').replace(/\D/g, '');
                        row.attr('id', 'row' + ++nb);
                        console.log(lastRow.attr('id'), row.attr('id'));
                        $('table').append(row);
                });
        </script>
</body>
</html>

Code :

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

var nbLines = $('#rfqItems tr').length-2;

Pourquoi -2 ?

**danielhagnoul** · 22/12/2012, 11h55

Bonjour

C'est un cas typique de duplication des ID où l'usage de mon plugin dvjhClone s'impose, car il peut y avoir des ID dans les TD ou dans le HTML des TD.

La table au départ :

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
<button id="addRow">Ajouter une ligne</button>
	<table>
		<tr id="row0">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row1">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row2">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row3">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row4">
			<td>1</td><td>2</td><td id="tr4td3">3</td><td>4</td><td>5</td><td>6</td>
		</tr>
	</table>

La table après quelques clics sur le bouton :

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
<table>
		<tbody><tr id="row0">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row1">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row2">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row3">
			<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
		</tr>
		<tr id="row4" data-dvjh-clone-id="dvjhClone1356173257197">
			<td>1</td><td>2</td><td id="tr4td3">3</td><td>4</td><td>5</td><td>6</td>
		</tr><tr id="dvjhClone1356173257197" data-dvjh-clone-id="dvjhClone1356173257907">
			<td>1</td><td>2</td><td id="dvjhClone13561732571972">3</td><td>4</td><td>5</td><td>6</td>
		</tr><tr id="dvjhClone1356173257907" data-dvjh-clone-id="dvjhClone1356173258377">
			<td>1</td><td>2</td><td id="dvjhClone13561732579072">3</td><td>4</td><td>5</td><td>6</td>
		</tr><tr id="dvjhClone1356173258377">
			<td>1</td><td>2</td><td id="dvjhClone13561732583772">3</td><td>4</td><td>5</td><td>6</td>
		</tr>
	</tbody></table>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script src="http://danielhagnoul.developpez.com/lib/plugin-dvjh/jquery.dvjhClone-1.0.0.js"></script>
<script>
	"use strict";
 
	$(function(){
 
		$( "#addRow" ).on( "click", function(){
			$( "tbody > tr:last", $( this ).next() ).dvjhClone({ cloneMethod: 0 });
		});
 
	});
</script>

clone de TR dans IE7

jQuery

Vue hybride

Discussions similaires

Partager

Partager