[DOM] Editeur HTML

**no0b11** · 13/05/2006, 13h08

Bonjour à tous,

Je réalise un simple éditeur HTML qui consiste à rentrer dans des champs de formulaire du texte dont la saisi est automatiquement insérer dans des cellules de tableau HTML ! Le problème que je rencontre est que lorsque je réalise la saisi dans un des champs, j'aurai voulu que le texte s'insère dans plusieurs cellules de mon tableau à la fois mais mon script ne prend en compte que la première cellule de mon tableau... Après cette brève explication voici mon code

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
<html>
<head>
</head>
<body>
<script type="text/javascript">
function insert() 
{
 for (var n=1;n<4;n++)
 {
     if ( document.getElementById(n).value != "" )
	{  
	document.getElementById("key_"+n).innerHTML = document.getElementById(n).value;
	}
 }
}
</script>
<form>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td><input type="text" id="1" size="4" onkeyup="insert()"></td><td><input type="text" id="2" size="4" onkeyup="insert()"></td>
<td><input type="text" id="3" size="4" onkeyup="insert()"></td><td><input type="text" id="4" size="4" onkeyup="insert()"></td>
<tr>
</table>
</form>
<br><br>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td id="key_4">....</td><td id="key_3">...</td>
<td id="key_4">....</td><td id="key_2">..</td>
<td id="key_1">.</td><td id="key_1">.</td>
<td id="key_2">..</td><td id="key_3">...</td>
<td id="key_4">....</td><td id="key_2">..</td>
</tr>
</table>
</body>
</html>

Donc si vous avez une idée de comment je pourrez procéder autrement pour réaliser ce que je veux... je suis preneur...

Merci

**psychoBob** · 13/05/2006, 13h24

Désolé de ne pas pouvoir te répondre, mais j'ai copié collé ton code dans une page html pour voir ce que ça donnait, et au vu du résultat je suis curieux de savoir à quoi peu te servir cela.

**Sheriff** · 13/05/2006, 13h54

hi !
je te suggère d'utiliser une fonction paramétrée, genre insert(n) pour éviter les for...
en plus pour aller de 1 à 4 c'est

Code :

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

for (var i=1; i<=4; i++)

@+

**Sheriff** · 13/05/2006, 13h57

et je crois aussi qu'il faut préciser le langage de ton script...

Code :

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

<script type=text/javascript language=javascript>

**Sheriff** · 13/05/2006, 14h01

en tous cas chez moi ça marche très bien lorsque je spécifie le langage...
tu peux de passer de paramétrer ta fonction
@+

**no0b11** · 13/05/2006, 13h55

Pour l'instant, cela ne va me servir à rien de précis ! Je fais cela seulement pour me familiariser avec les modèles DOM... Et je butais sur ce que je vous ai expliqué, donc j'aurai voulu avoir une réponse pour avancer dans mon apprentissage...

Pas de petite réponse alors ! Je pensais modifier mon script de la manière suivante pour parcourir toutes les balises "key_"+n mais cela reste en vain:

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
<script type="text/javascript">
function insert() 
{
 for (var n=1;n<5;n++)
 {
     if ( document.getElementById(n).value != "" )
	{  
   	 for(var i = 0; i < document.getElementById("key_"+n).length; i++)
	  {
 	  document.getElementById("key_"+n)[i].innerHTML = document.getElementById(n).value;
 	  }
	}
 }
}
</script>

**no0b11** · 13/05/2006, 14h02

Merci Sheriff pour tes remarques mais cela ne changera en rien mon problème qui persistera car tu ne me donnes que des idées d'affinements' de mon code (à l'exception du <4 qui est une erreur de ma part

) !

Pour la balise <script> tu n'es pas obligé de spécifié l'attribut language...

**no0b11** · 13/05/2006, 14h06

Désolé mais même en rajoutant l'attribut language, cela ne change rien du tout ! Je ne sais pas comment tu fais pour que cela marche chez toi !!!

Je te rappelle que lorsque tu fais une saisi dans le 1er champ par exemple, cela est sensé écrire dans 2 cellules du tableau simultanément ! Enfin, du moins c'est l'effet recherché...

**Sheriff** · 13/05/2006, 14h06

mais pourtant, ton code fonctionne chez moi, sous ie !

**Sheriff** · 13/05/2006, 14h08

essaie un peu ça...
j'avoue que j'y ai pas changé grand chos, mais je t'assure qu'il fonctionne

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
<html>
<head>
</head>
<body>
<script type="text/javascript" language="javascript">
function insert() 
{
 for (var n=1;n<=4;n++)
 {
     if ( document.getElementById(n).value != "" )
 {  
 document.getElementById("key_"+n).innerHTML = 
document.getElementById(n).value;
 }
 }
}
</script>
<form>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td><input type="text" id="1" size="4" 
onkeyup="insert()"></td><td><input type="text" id="2" size="4" 
onkeyup="insert()"></td>
<td><input type="text" id="3" size="4" 
onkeyup="insert()"></td><td><input type="text" id="4" size="4" 
onkeyup="insert()"></td>
<tr>
</table>
</form>
<br><br>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td id="key_4">....</td><td id="key_3">...</td>
<td id="key_4">....</td><td id="key_2">..</td>
<td id="key_1">.</td><td id="key_1">.</td>
<td id="key_2">..</td><td id="key_3">...</td>
<td id="key_4">....</td><td id="key_2">..</td>
</tr>
</table>
</body>
</html>

**no0b11** · 13/05/2006, 14h09

C'est pas possible, moi aussi je le teste sous IE et cela ne fait qu'insérer la saisi dans une seule cellule (ce n'est pas ce que je veux) ! As-tu bien lu ce que je recherchais ?

[DOM] Editeur HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager