Création tableau à la volé

Version imprimable

bonjour,

voici une ligne de mon tableau :
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 <tr> <td rowspan="2">var1</td> <td rowspan="2">var2</td> <td rowspan="2"> var3 </td> <td rowspan="2"> var4 </td> <td>var5</td> <td>var6</td> <td>var7</td> <td>var8</td> <td>var9</td> <td>toto</td> </tr> <tr> <td>var11</td> <td>var12</td> <td>var13</td> <td>var14</td> <td>var15</td> <td>tata</td> </tr>
=> comment faire pour créer un tableau de 30 lignes avec ce modèle et de remplacer mes variables (var1, var2, ...) par des valeurs qui sont dans une variable tableau javascript ?

=> j'aimerais aussi pouvoir mettre de ID au cases pour poouvoir modifier facilement les valeurs du tableau...

02/03/2007, 10h43
Matthieu2000

http://www.developpez.net/forums/sho...d.php?t=189806

Citation:

addRow CloneRow...
02/03/2007, 10h57
Emcy

ta solution a l'air pas mal mais je ne vois pas comment créer ma ligne => comment fait-on pour créer une ligne avec des id et des rowspan ?
02/03/2007, 11h03
Matthieu2000

fais quelque recherche
http://www.developpez.net/forums/sho...hlight=rowspan
pareil pour id

je n'arrive pas à créer de lignes :arf:

mon tableau :

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
				<table id="TabVLAN">
					<thead>
						<tr>
							<th colspan="4">VLAN</th>
							<th colspan="5">Port</th>
							<th></th>
						</tr>
 
						<tr>
							<th>N°</th>
							<th>Enable</th>
							<th>ID</th>
							<th>PRI</th>
							<th>1</th>
							<th>2</th>
							<th>3</th>
							<th>4</th>
							<th>5</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody id="CorpsTab">
					</tbody>
				</table>

mon 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
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
function CreateTab2()
{
	var maChaine = '';
	var cell;
 
	for(var i = 0 ; i<16 ; i++){
 
		alert(1);
		var row1 = document.createElement('tr')
 
		cell = document.createElement('td');
		cell.rowSpan = 2;
		cell.id = "Enb" + i;
		row1.appendChild(cell);
 
		alert(2);	
 
		cell = document.createElement('td');
		cell.rowSpan = 2;
		cell.id = "ID" + i;
		row1.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 2;
		cell.id = "PRI" + i;
		row1.appendChild(cell);
 
		// *******************************************************		
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Member" + i +"_0";
		row1.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Member" + i +"_1";
		row1.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Member" + i +"_2";
		row1.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Member" + i +"_3";
		row1.appendChild(cell);		
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Member" + i +"_4";
		row1.appendChild(cell);
		// *******************************************************			
 
		var row2 = document.createElement('tr')
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Tagged" + i +"_0";
		row2.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Tagged" + i +"_1";
		row2.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Tagged" + i +"_2";
		row2.appendChild(cell);
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Tagged" + i +"_3";
		row2.appendChild(cell);		
 
		cell = document.createElement('td');
		cell.rowSpan = 1;
		cell.id = "Tagged" + i +"_4";
		row2.appendChild(cell);
 
		alert(3);		
 
		document.getElementById('CorpsTab').lastChild.appendChild(row1);
		alert(4);
 
		document.getElementById('CorpsTab').lastChild.appendChild(row2);
		alert(5);
	};
 
 
	InitialiseVar();
	MAJTab();
};

02/03/2007, 13h47
Emcy

a priori, le probleme vient que j'utilise la balise tbody : que faire ?

c'est bon j'ai presque trouvé :

voici mon 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function CreateTab()
{	
	var tbody = document.createElement("tbody");
 
	for(var i = 0 ; i<16 ; i++){
		var tr = document.createElement('tr');
 
		AddCell(tr, parseInt(i), '', 2);
 
		AddCell(tr, '', "Enb" + i, 2);
		AddCell(tr, '', "ID" + i, 2);
		AddCell(tr, '', "PRI" + i, 2);
 
		AddCell(tr, '', "Member" + i +"_0", 1);
		AddCell(tr, '', "Member" + i +"_1", 1);
		AddCell(tr, '', "Member" + i +"_2", 1);
		AddCell(tr, '', "Member" + i +"_3", 1);
		AddCell(tr, '', "Member" + i +"_4", 1);
 
		AddCell(tr, 'Member', '', 1);
 
		tbody.appendChild(tr);	
 
		// ************************************************************
		var tr2 = document.createElement('tr');
 
		AddCell(tr2, '', "Tagged" + i +"_0", 1);
		AddCell(tr2, '', "Tagged" + i +"_1", 1);
		AddCell(tr2, '', "Tagged" + i +"_2", 1);
		AddCell(tr2, '', "Tagged" + i +"_3", 1);
		AddCell(tr2, '', "Tagged" + i +"_4", 1);
 
		AddCell(tr2, 'Tagged', '', 1);
 
		tbody.appendChild(tr2);	
 
		// **********************************************************		
 
		document.getElementById('TabVLAN').appendChild(tbody);
	}
 
};
 
function AddCell(maLigne, monText, MonID, numSpan)
{
	var td = document.createElement('td');
	td.rowSpan = numSpan;
 
	var text = document.createTextNode(monText);
	td.appendChild(text);
 
	if (MonID != ''){
		td.setAttribute('id', MonID);
	};	
	maLigne.appendChild(td);	
};

=> le problème et qu'a l'origine, mon tableau à deja des cases dans tbody : est-il possible d'ecraser la section plutot que de rajouter des elements ?