clone de TR dans IE7

Version imprimable

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:

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.

Aucun problème avec IE sur ce code :

Code:

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:

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

Pourquoi -2 ?

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:

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:

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:

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>