Ajouter une ligne à un tableau

Version imprimable

Ajouter une ligne à un tableau problème

Bonjour je souhaiterais ajouter des lignes vierges à un tableau mais lorsque j'appuie sur "ajouter" un ligne toute fine apparait, presque comme un seul trait...
Voici ma fonction (que j'ai trouvé sur le net puis modifié):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language=javascript>
function addRow(tableau){
	var tableau = document.getElementById(tableau);
	//Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
	var tds = tableau.getElementsByTagName('tr')[1].getElementsByTagName('td').length;
 
	var tr = document.createElement('tr'); //On créé une ligne
	//On ajoute autant les cellules
	for(var i=0; i<tds; i++){
		var td = document.createElement('td');
		tr.appendChild(td);
 
 
	}
 
	//On ajoute la ligne créée au tableau : attention, sur firefox on peut ajouter directement au tableau, mais IE ajoute par défaut un noeud tbody à la table
	if(tableau.firstChild.tagName == 'TBODY'){
		tableau.firstChild.appendChild(tr);
	}
	else{
		tableau.appendChild(tr);
	}
}

Code:

<a href="javascript:addRow('matable');">Ajouter une ligne</a>

Merci de votre aide :)

11/04/2009, 11h44
le_chomeur

une petite recherche !

http://javascript.developpez.com/faq...ble#AjoutLigne

tes cellules ne doivent pas être vide , sinon elle on comme hauteur 0 ....
15/04/2009, 10h52
remrem13

Merci pour ta réponse mais le problème c'est que je dois dupliquer une ligne vide avec 2 radio button, 2 SELECT, 5 champs de texte ... Je n'y arrive toujours pas :(
15/04/2009, 11h04
le_chomeur

fixe la hauteur de tes célulle dans ce cas la :)

Le problème c'est que je ne sais pas comment dire qu'il faut ajouter une ligne qui contient les radio button aux bons endroits, les select.....

voici une partie de mon tableau (je voudrais dupliquer la ligne qui contient les bouton, menus déroulants... mais vierge):

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
 
<table border="1" width"1500"  align="left" id="matable">
		<tr align="center"><td colspan="10	"><b><u>Infos Contrat</b></u></td></tr>
		<tr><td width"50" rowspan="2">N&ordm; Contrat</td>
			<td width"70" rowspan="2">Type de Contrat</td>
			<td rowspan="2">Actif</td>
			<td width"10" rowspan="2">Date de D&eacute;but</td>
			<td width"100" rowspan="2">Date de Fin</td>
			<td colspan="3"><b><u>Facturation :</b></u>
				<tr><td align="right">Montant HT</td>
					<td align="right">P&eacute;riodicit&eacute;</td>
					<td align="right">Terme</td>
 
			</td>
 
			<td colspan="2">Paiement</td>
		</tr></tr>
 
 
 
 
 
 
		<tr>		
			<td><INPUT TYPE="text" name="NumContrat" size="10"></td>
			<td><SELECT NAME="NomTypeContrat">
				<option value="choix1">choix1</option>
				<option value="choix2">choix2</option>
 
			</SELECT></td>
			<td><INPUT TYPE="radio" name="Actif" value="Oui">Oui
			<INPUT TYPE="radio" name="Actif" value="Non">Non</td>
			<td><SELECT NAME="JourDebut">
				<option value="01">01</option>
				<option value="02">02</option>	
				<option value="30">30</option>
				<option value="31">31</option>
			</SELECT>	
			<SELECT NAME="MoisDebut">
				<option value="01">01</option>
				<option value="12">12</option>	
			</SELECT>
			<SELECT NAME="AnneeDebut">
				<option value="2000">2000</option>
				<option value="2016">2016</option>
				<option value="2017">2017</option>	
			</SELECT>
			</td>
			<td><SELECT NAME="JourFin">
				<option value="01">01</option>
				<option value="31">31</option>
			</SELECT>	
			<SELECT NAME="MoisFin">
				<option value="01">01</option>
				<option value="12">12</option>	
			</SELECT>
			<SELECT NAME="AnneeFin">
				<option value="1999">1999</option>	
				<option value="2017">2017</option>	
			</SELECT>
			</td>
		<td><INPUT TYPE="text" name="MontantHT" size="10"></td>
		<td><INPUT TYPE="text" name="Periodicite" size="20"></td>
		<td><INPUT TYPE="text" name="Terme" size="20"></td>
		<td>
		<INPUT TYPE="radio" name="Paiement" value="Effectue">Effectu&eacute;
		</td>
		<td>
		<INPUT TYPE="radio" name="Paiement" value="Non Effectue">Non Effectu&eacute;
		</td></tr>
		</table>

15/04/2009, 13h57
le_chomeur

clone tes objets :

Citation:

"La méthode cloneNode() en JavaScript prend et retourne une copie de l'élément appelant. Si l'argument « true » est passé en paramètre, tous les descendants du noeud référent seront clonés récursivement.

Si l'argument est omis ou si la valeur « false » est passée en paramètre, seul l'élément appelant sera cloné, aucun des noeuds enfants ne le seront"

si besoins je te ferais un script de démo

fonction ajout ligne que j'utilise dans mon script

alors essaie de modifier les nom des variable selon ton besoin

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
<table width="948" height="140" border="1" id="table1">
    <tr>
      <td width="144"><div align="center">D&eacute;SIGNATION </div></td>
      <td width="144"><div align="center">COULEUR</div></td>
      <td width="144"><div align="center">BASE</div></td>
      <td width="144"><div align="center">RAY&eacute;</div></td>
      <td width="144"><div align="center">UNI</div></td>
      </tr>
    </table>
	<tr>
<script language="javascript">
var numero=0;
function AddRow1(){
	numero++;
	// Titre
	var newRow = document.getElementById('table1').insertRow(-1);
 
	//
	var newCell = newRow.insertCell(0);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="text" name="des_typ_mat_pre"['+numero+']" id="des_typ_mat_pre"['+numero+']">';
	//
	var newCell = newRow.insertCell(1);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="text" name="couleur['+numero+']" id="couleur['+numero+']">';
	//
	var newCell = newRow.insertCell(2);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="text" name="qte_mat_base['+numero+']" id="qte_mat_base['+numero+']" size="10">';
	//
	var newCell = newRow.insertCell(3);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="text" name="qte_mat_raye['+numero+']" id="qte_mat_raye['+numero+']" >';
	//
	var newCell = newRow.insertCell(4);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="text" name="qte_mat_uni['+numero+']" id="qte_mat_uni['+numero+']" >';
	//
	var newCell = newRow.insertCell(5);
	newCell.align = 'center';
	newCell.innerHTML = '<input type="button" onclick="deleteCurrentRow(this)" value=" Supprimer" alt="Delete" >';
}
function deleteCurrentRow(obj)
{
	var delRow = obj.parentNode.parentNode;
	var tbl = delRow.parentNode;
 
	if(tbl.getElementsByTagName('tr').length==1){
		alert('Vous ne pouvez pas supprimer cette ligne');return false ;
	}
	tbl.removeChild(delRow);
}
 
 
AddRow1();
 
</script>
<input name="clic1" type="button" onClick="AddRow1()" value="clic">

elle marche bien chez moi!!

15/04/2009, 14h05
remrem13

je test ça je vous dis tout de suite
merci
15/04/2009, 14h16
remrem13

Me revoila,
j'ai testé le code de Roy-mustang en le modifiant et ca marche! c'est parfait merci :)
15/04/2009, 14h44
roy-mustang

Citation:

Envoyé par remrem13

Me revoila,
j'ai testé le code de Roy-mustang en le modifiant et ca marche! c'est parfait merci :)

de rien bonne chance
16/04/2009, 16h45
remrem13

En fait je re-édit ce post car je rencontre encore un soucis avec l'ajout de ligne,
la ligne est bien ajoutée mais n'est pas indépendante de l'autre déjà présente : les radio boutons... ayant les mêmes noms, si j'ai 2 lignes avec 2 radios sur chacune, les 4 seront liés et seulement 1 sur les 4 pourra être coché

ensuite, je ne sais pas vraiment quoi mettre au niveau de la requête pour différencier les lignes.
Dans mon programme, un Client peux avoir plusieurs contrats ...

voici le code pour permettant de modifier les infos (qui sont récupérées depuis la BDD):

Citation:

<table border="1" width"1500" align="left" id="matable">
<tr align="center"><td colspan="10 "><b><u>Infos Contrat</b></u></td></tr>
<tr><td width"50" rowspan="2">Nº Contrat</td>
<td width"70" rowspan="2">Type de Contrat</td>
<td rowspan="2">Actif</td>
<td width"10" rowspan="2">Date de Début</td>
<td width"100" rowspan="2">Date de Fin</td>
<td colspan="3"><b><u>Facturation :</b></u>
<tr><td align="right">Montant HT</td>
<td align="right">Périodicité</td>
<td align="right">Terme</td>

</td>

<td colspan="2">Paiement</td>
</tr></tr>

<tr>
<td><INPUT TYPE="text" name="NumContrat" size="10"></td>
<td><SELECT NAME="NomTypeContrat">
<option value="choix1">choix1</option>
<option value="choix2">choix2</option>

</SELECT></td>
<td><INPUT TYPE="radio" name="Actif" value="Oui">Oui
<INPUT TYPE="radio" name="Actif" value="Non">Non</td>
<td><SELECT NAME="JourDebut">
<option value="01">01</option>
<option value="02">02</option>
<option value="30">30</option>
<option value="31">31</option>
</SELECT>
<SELECT NAME="MoisDebut">
<option value="01">01</option>
<option value="12">12</option>
</SELECT>
<SELECT NAME="AnneeDebut">
<option value="2000">2000</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</SELECT>
</td>
<td><SELECT NAME="JourFin">
<option value="01">01</option>
<option value="31">31</option>
</SELECT>
<SELECT NAME="MoisFin">
<option value="01">01</option>
<option value="12">12</option>
</SELECT>
<SELECT NAME="AnneeFin">
<option value="1999">1999</option>
<option value="2017">2017</option>
</SELECT>
</td>
<td><INPUT TYPE="text" name="MontantHT" size="10"></td>
<td><INPUT TYPE="text" name="Periodicite" size="20"></td>
<td><INPUT TYPE="text" name="Terme" size="20"></td>
<td>
<INPUT TYPE="radio" name="Paiement" value="Effectue">Effectué
</td>
<td>
<INPUT TYPE="radio" name="Paiement" value="Non Effectue">Non Effectué
</td></tr>
</table>

et la fonction pour ajouter les lignes:

Citation:


<script language="javascript">
var numero=0;
function AddRow0(){
numero++;
var newRow = document.getElementById('tablecontrat').insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.align = 'center';
newCell.innerHTML = '<input type="text" name="NumClient"['+numero+']" id="NumClient"['+numero+'] size="10">';
var newCell = newRow.insertCell(1);
newCell.align = 'center';
newCell.innerHTML = '<SELECT NAME="NomTypeContrat"['+numero+']" id="NomTypeContrat['+numero+']"><option value="Hotline + Maj Soft">Hotline + Maj Soft</option><option value="Echange Standard">Echange Standard</option><optgroup label="GTR"><option value="GTR 8h 5/7 HO">GTR 8h 5/7 HO</option><option value="GTR 8h 5/7 24/24">GTR 8h 5/7 24/24</option><option value="GTR 8h 7/7 HO">GTR 8h 7/7 HO</option><option value="GTR 8h 7/7 24/24">GTR 8h 7/7 24/24</option><option value="GTR 4h 5/7 HO">GTR 4h 5/7 HO</option><option value="GTR 4h 5/7 24/24">GTR 4h 5/7 24/24</option><option value="GTR 4h 7/7 HO">GTR 4h 7/7 HO</option><option value="GTR 4h 7/7 24/24">GTR 4h 7/7 24/24</option></optgroup><optgroup label="GTI"><option value="GTI 8h 5/7 HO">GTI 8h 5/7 HO</option><option value="GTI 8h 5/7 24/24">GTI 8h 5/7 24/24</option><option value="GTI 8h 7/7 HO">GTI 8h 7/7 HO</option><option value="GTI 8h 7/7 24/24">GTI 8h 7/7 24/24</option><option value="GTI 4h 5/7 HO">GTI 4h 5/7 HO</option><option value="GTI 4h 5/7 24/24">GTI 4h 5/7 24/24</option><option value="GTI 4h 7/7 HO">GTI 4h 7/7 HO</option><option value="GTI 4h 7/7 24/24">GTI 4h 7/7 24/24</option></optgroup></SELECT>';
var newCell = newRow.insertCell(2);
newCell.align = 'center';
newCell.innerHTML = '<INPUT TYPE="radio" name="Actif"['+numero+']" id="Actif"['+numero+']" value="Oui">Oui<INPUT TYPE="radio" name="Actif['+numero+']" id="Actif['+numero+']" value="Non">Non';
var newCell = newRow.insertCell(3);
newCell.align = 'center';
newCell.innerHTML = '<SELECT NAME="JourDebut"['+numero+']" id="JourDebut"['+numero+']"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></SELECT><SELECT NAME="MoisDebut"['+numero+']" id="MoisDebut"['+numero+']"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></SELECT><SELECT NAME="AnneeDebut"['+numero+']" id="AnneeDebut"['+numero+']"><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option></SELECT>';
var newCell = newRow.insertCell(4);
newCell.align = 'center';
newCell.innerHTML = '<SELECT NAME="JourFin"['+numero+']" id="JourFin"['+numero+']"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option>option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></SELECT><SELECT NAME="MoisFin"['+numero+']" id="MoisFin"['+numero+']"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></SELECT><SELECT NAME="AnneeFin"['+numero+']" id="AnneeFin"['+numero+']"><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option<<option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option></SELECT>';
var newCell = newRow.insertCell(5);
newCell.align = 'center';
newCell.innerHTML = '<input type="text" name="MontantHT"['+numero+']" id="MontantHT"['+numero+'] size="10"" >';
var newCell = newRow.insertCell(6);
newCell.align = 'center';
newCell.innerHTML = '<input type="text" name="Periodicite['+numero+']" id="Periodicite['+numero+']" size="10">';
var newCell = newRow.insertCell(7);
newCell.align = 'center';
newCell.innerHTML = '<input type="text" name="Terme['+numero+']" id="Terme['+numero+']" size="17">';
var newCell = newRow.insertCell(8);
newCell.align = 'center';
newCell.innerHTML = '<INPUT TYPE="radio" name="Paiement"['+numero+']" id="Paiement"['+numero+']" value="Effectue" checked>Effectué';
var newCell = newRow.insertCell(9);
newCell.align = 'center';
newCell.innerHTML = '<INPUT TYPE="radio" name="Paiement"['+numero+']" id="Paiement"['+numero+']" value="Non Effectue">Non Effectué';
var newCell = newRow.insertCell(10);
newCell.align = 'center';
newCell.innerHTML = '<img src="croix.png" onclick="deleteCurrentRow(this)" alt="Delete" >';
}function deleteCurrentRow(obj){
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode;
if(tbl.getElementsByTagName('tr').length==1){
alert('Vous ne pouvez pas supprimer cette ligne');return false ;}
tbl.removeChild(delRow);}
</script>


Roy-Mustang, je pense que la différentiation se fait au niveau du ['+numero+'] mais je ne comprend pas comment cela est interprété...
Je galère la dessus et malgré mes recherches cela ne donne rien :(

Merci de m'aider :)