[JS] Cr�ation de code HTML

Version imprimable

Bonjour,

Je suis d�butant en Javascript et j'ai un tableau qui se pr�sente de la forme suivante :

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
 
<html>
<head>
	<title>TEST</title>
</head>
</html>
<body>
<form name="tableau">
<table class="tableau" border="1" cellpadding="0" cellspacing="1">
<tbody>
	<tr><td colspan="8">Translation de Port</td></tr>
	<tr><td colspan="6">Combien de translation de port souhaitez-vous cr&eacute;er ?</td><td colspan="2"><input type="text" maxlength="3" style="width: 25px; text-align: right;" name="nb-ligne" /></td></tr>
<script type="text/javascript">
        function autreTSL(nb-ligne) {
                for (var i = 1; i <= nb-ligne; i++) {
                        document.write("<tr><td>Interface d'entr&eacute;e :</td><td><input type=\"text\" maxlength=\"3\" style=\"width: 50px; text-align: right;\" name=\"int-entree"+i+"\" /></td><td>Port :</td><td><input type=\"text\" /></td><td>Adresse IP du serveur :</td><td><input type=\"text\" /></td><td>Port :</td><td><input type=\"text\" /></td></tr>\n\ ");
                }
        }
</script>
</tbody>
</table>
</form>
</body>
</html>

Et avec mon javascript en fonction du nombre de ligne que je mets, je voudrais dynamiquement qu'il cr�e les lignes.

Mais mon script ne fonctionne pas...
Quelqu'un peut-il m'aider ?

D'avance merci !

02/12/2006, 11h52
javatwister

n'utilise pas la m�thode write pour cr�er un tableau;

difficile de comprendre � quoi doit ressembler ton tableau;
� quoi vont servir ces lignes?
� quoi sert le tableau?

tu peux nous faire un dessin ou expliquer ton projet?
02/12/2006, 11h54
Bis�n�rs

Je ne vois � aucun endroit un appel de ta foncton.
02/12/2006, 11h57
Badaboumpanpan

J'y ai mis en place un firewall sous Debian avec iptables. Je cherche � cr�er un fichier de r�gle via une interface web que je suis entrain de cr�er.

L� je suis sur la partie "Translation de Ports". Je vais donc rectifier mon premier post.

En gros je demande combien de translation de port on veut cr�er et en fonction de la r�ponse les lignes se cr�e.

Je sais pas si �clair un peu plus...

Citation:

Envoy� par Bis�n�rs

Je ne vois � aucun endroit un appel de ta foncton.

Justement, je sais pas trop comment m'y prendre... Je me doute que c'est en partie pour �a que �a marche pas... :aie:

J'ai pens� � un onLoad mais �a ne fait rien...
Code:

1 2 <tr><td colspan="6">Combien de translation de port souhaitez-vous créer ?</td><td colspan="2"><input type="text" onLoad="autreTSL" maxlength="3" style="width: 25px; text-align: right;" name="nb-ligne" /></td></tr>

02/12/2006, 12h37
Badaboumpanpan

Je viens de tester "onChange" mais �a ne change rien...

Si ce n'est pas document.write ? Que faut-il mettre ?
02/12/2006, 13h08
Badaboumpanpan

J'ai r�solu mon souci en utilisant une boucle en php.

Si jamais vous avez tout de m�me une id�e je suis preneur !!

Code:

1
2
3
4
5
6
7
function x() {
  var t = document.getElementById("tableID")
  for (...) {
     var r = t.addRow(); // syntaxe à vérifier
     r.innerHTML="<input name='xxx[]' />";
  }
}

Code:

<xy onX="x();"></xy>

Alors, voil� o� j'en suis :

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
 
function addRow(){
    var newRow = document.getElementById('tableau').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = "Interface d'entr&eacute;e :";
    newCell = newRow.insertCell(1);
    newCell.innerHTML = "<select name=\"interface\"><option value=\"int1\">INT1</option><option value=\"int2\">INT2</option><option value=\"int3\">INT3</option><option value=\"int4\">INT4</option></select>";
	newCell = newRow.insertCell(2);
    newCell.innerHTML = "Port :";
	newCell = newRow.insertCell(3);
    newCell.innerHTML = "<input type=\"text\" maxlength=\"5\" style=\"width: 40px; text-align: right;\" name=\"port-int-entree\" />";
	newCell = newRow.insertCell(4);
    newCell.innerHTML = "Adresse IP du Serveur :";
	newCell = newRow.insertCell(5);
    newCell.innerHTML = "<input type=\"text\" maxlength=\"15\" style=\"width: 100px; text-align: right;\" name=\"ip-srv\" />";
	newCell = newRow.insertCell(6);
    newCell.innerHTML = "Port :";
	newCell = newRow.insertCell(7);
    newCell.innerHTML = "<input type=\"text\" maxlength=\"5\" style=\"width: 40px; text-align: right;\" name=\"port-srv\" />";
}
 
function autreTSL(nombre) {
	for (var i = 1; i <= nombre; i++) {
		addRow();
	}
}

et le code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
<head>
	<title>TEST</title>
	<script type="text/javascript" src="test.js"></script>
</head>
</html>
<body>
<form name="iptables">
<table id="tableau" border="1" cellpadding="0" cellspacing="1">
<tbody>
	<tr><td colspan="8">Translation de Port</td></tr>
	<tr><td colspan="6">Combien de translation de port souhaitez-vous cr&eacute;er ?</td><td><input type="text" maxlength="3" style="width: 25px; text-align: right;" name="nbligne" /></td><td><input type="button" value="OK" onClick="autreTSL(document.iptables.nbligne.value)" /></td></tr>
</tbody>
</table>
</form>
</body>
</html>

L'ajout de lignes fonctionne � merveille !!! Merci beaucoup !!!
J'ai encore quelques inconv�nients que je rencontre.
Si je rentre un chiffre et que je valide j'obtiens bien le nombre de ligne souhait�. Je tape 4 --> 4 lignes. Mais imaginons que je me plante et que je souhaite en mettre 6... Je tape 6 --> 6+4 lignes. Comment puis-je faire pour que si je me trompe il prenne bien le nombre de ligne que je retape ?

Merci beaucoup pour votre aide !!!