[JS] Création de code HTML

**Badaboumpanpan** · 02/12/2006, 11h41

Bonjour,

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

Code HTML :

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

**javatwister** · 02/12/2006, 11h52

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?

**Bisûnûrs** · 02/12/2006, 11h54

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

**Badaboumpanpan** · 02/12/2006, 11h57

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

**Badaboumpanpan** · 02/12/2006, 12h01

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

J'ai pensé à un onLoad mais ça ne fait rien...

Code :

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

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

**Badaboumpanpan** · 02/12/2006, 12h37

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

Si ce n'est pas document.write ? Que faut-il mettre ?

**Badaboumpanpan** · 02/12/2006, 13h08

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

**FremyCompany** · 02/12/2006, 14h13

Code :

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

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

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

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

**Badaboumpanpan** · 03/12/2006, 19h16

Alors, voilà où j'en suis :

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

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

[JS] Création de code HTML

JavaScript

Discussions similaires

Partager

Partager