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