Discussion :

[remrem13]

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 :

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
<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 :

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

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

Merci de votre aide

[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 ....

[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

[le_chomeur]

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

[remrem13]

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 :

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
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>

[le_chomeur]

clone tes objets :

"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

[roy-mustang]

alors essaie de modifier les nom des variable selon ton besoin

Code :

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
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!!

[remrem13]

je test ça je vous dis tout de suite
merci

[remrem13]

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

[roy-mustang]

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

de rien bonne chance

[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):

<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>

et la fonction pour ajouter les lignes:

<!-- SCRIPT AJOUTER UNE LIGNE -->
<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&eacute;';
var newCell = newRow.insertCell(9);
newCell.align = 'center';
newCell.innerHTML = '<INPUT TYPE="radio" name="Paiement"['+numero+']" id="Paiement"['+numero+']" value="Non Effectue">Non Effectu&eacute;';
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>
<!-- FIN SCRIPT AJOUTER UNE LIGNE -->

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