[DOM] ajout de lignes dans un tableau

Version imprimable

29/11/2007, 21h18
Invité

[DOM] ajout de lignes dans un tableau

Bonjour,

J'ai un petit problème lorsque je souhaite ajouter des lignes dans un tableau. J'ai repris un script JS en essayant de l'adapter à mon cas qui est le suivant mais qui me donne du n'importe quoi !

voici le résultat : http://sbz29.free.fr .

Merci
29/11/2007, 21h53
jeje13009

slt,

si tu ne mets pas ton code, on ne pourra pas te t'aider...

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
 
<html>
<head>
	<script language="javascript">
	function create_champ(i)
	{
		var i2 = i + 1;
		document.getElementById('ligne').innerHTML += '	<form name="form_enlevement"><TR style="text-align:center" name="ligne_i">';
		document.getElementById('ligne').innerHTML += '<TD name="id_colis1"><span id="leschamps_elisey"><input type="checkbox" name="CB_1"></span>';
		document.getElementById('ligne').innerHTML += '</TD><TD> <input type="text" size=2 name="poids1"> </TD><TD>';
		document.getElementById('ligne').innerHTML += '<input type="text" size=10 name="nom1"> <input type="text" size=10 name="prenom1"> </TD><TD>';
		document.getElementById('ligne').innerHTML += '<input type="text" size=25 name="adresse1"></TD><TD> <input type="text" size=7 name="code_postal1"></TD>';
		document.getElementById('ligne').innerHTML += '<TD> <input type="text" size=15 name="ville1"></TD><TD> <input type="text" size=10 name="telephone1"></TD></TR>';
	}
	</script>
 
 
<span id="input_2">
	<input name="button" type="button" class="input2" onClick="javascript:create_champ(2)" value="Ins&eacute;rer un autre champ">
</span>	
</div>
<TABLE BORDER="1" style="width:80%;margin-left:10em">
	<TR>
		<TH></TH>
		<TH>Poids (Kg)</TH>
		<TH>Nom Prenom Destinataire</TH>
		<TH>Adresse</TH>
		<TH>Code Postal</TH>
		<TH>Ville</TH>
		<TH>Telephone</TH>
	</TR>
	<span id="ligne">
		<form name="form_enlevement">
		<TR style="text-align:center" name="ligne_1">
			<TD name="id_colis1"> 
				<span id="leschamps_elisey">
					<input type="checkbox" name="CB_1">
				</span>
			</TD>
			<TD> <input type="text" size=2 name="poids1"> </TD>
			<TD> <input type="text" size=10 name="nom1"> <input type="text" size=10 name="prenom1"> </TD>
			<TD> <input type="text" size=25 name="adresse1"></TD>
			<TD> <input type="text" size=7 name="code_postal1"></TD>
			<TD> <input type="text" size=15 name="ville1"></TD>
			<TD> <input type="text" size=10 name="telephone1"></TD>
		</TR>
	</span>
</form>
 
</TABLE>
</html>

mais pour etre plus propre , j'ai mis le code sur http://sbz29.free.fr (clic droit affichage du code source de la page)

29/11/2007, 22h55
bigboomshakala

le plus simple (et de loin le plus propre) c'est d'utiliser le DOM et de manipuler l'objet table, et non pas d'écrire dans le innerhtml.
il y a des explications dans la FAQ sur comment peupler une table

j'ai trouvé ce code là si c'est celui que tu voyais et effectivement c'est nettement plus propre!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table id="table">
    <tr>
        <td>Cellule 0</td>
        <td>Cellule 1</td>
    </tr>
</table>
<input type="button" value="Ajouter une ligne" onClick="AddRow()" > 
 
<script type="text/javascript">
function AddRow(){
    var newRow = document.getElementById('table').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '[nouvelle cellule 0]';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '[nouvelle cellule 1]';
}
</script>

Merci beaucoup.

30/11/2007, 08h44
bigboomshakala

:king: