[DOM] Editeur HTML

Version imprimable

[DOM] Editeur HTML

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:

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

Merci ;)

13/05/2006, 13h24
psychoBob

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.
13/05/2006, 13h54
Sheriff

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:

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

@+

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:

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>

13/05/2006, 13h57
Sheriff

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

Code:

<script type=text/javascript language=javascript>
13/05/2006, 14h01
Sheriff

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
@+
13/05/2006, 14h02
no0b11

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 :P ) !

Pour la balise <script> tu n'es pas obligé de spécifié l'attribut language...
13/05/2006, 14h06
no0b11

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é...
13/05/2006, 14h06
Sheriff

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

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

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

13/05/2006, 14h09
no0b11

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 ?
13/05/2006, 14h12
no0b11

Donc c'est bien ce que je t'ai dis, je viens de tester le code que tu m'as pensé (qui en passant est celui que je testais aussi) et je suis bien d'accord qu'il n'y a aucune erreur ou quoique ce soit mais il n'insère pas la saisi dans toutes les cellules qu'il devrait ! Il ne l'insère que dans une seule au maximum ! Or si tu relis mes explications ce n'est pas ce que je recherche...
13/05/2006, 14h15
Sheriff

remarque : pourquoi est-ce qu'il y a des td qui portent le même id ? c peut-être ça la source de tes pb !

Attention, tu ne peux pas avoir plusieurs elements avec le même id!

Essaie ça :

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
27
28
29
<html>
<head>
</head>
<body>
<script type="text/javascript">
function insert(el, cibles){
  if((cibles.constructor == Array)){
    for(var i=0; i<cibles.length; i++){
      if(document.getElementById(cibles[i]) && document.getElementById(cibles[i]).value != "")
        { document.getElementById(cibles[i]).innerHTML = el.value; }
    }
  }
}
</script>
<form>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td><input type="text" id="1" size="4" onkeyup="insert(this, ['key_1', 'key_2'])"></td>
<tr>
</table>
</form>
<br><br>
<table width="100%" border="1" bordercolor="#000000">
<tr>
<td id="key_1">....</td><td id="key_2">....</td>
</tr>
</table>
</body>
</html>

++

E-Spiration : source d'Idées!

13/05/2006, 14h16
Sheriff

je vois maintenant... sorry
en fait les homonymes c pas bon...
13/05/2006, 14h26
no0b11

Merci lalouve, ton exemple marche parfaitement ! Je vais essayer de m'en inspirer !

Mais si je travaillais avec getElementsByName() est-ce que je pourrais avoir plusieurs éléments avec le même name, ou c'est la même chose qu'avec les id !

En continuant de travailler de mon coté, voilà ce que j'ai testé et qui marche parfaitement come je le voulais, bizarrement car il y a un mélange de getElementById() et getElementsByName() (alors que je n'ai mis aucun attribut name) !!!!!!

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
</head>
<body>
<script type="text/javascript">
function insert() 
{
 for (var n=1;n<5;n++)
 {
     if ( document.getElementById(n).value != "" )
	{  
   	 for(var i = 0; i < document.getElementsByName("key_"+n).length; i++)
	  {
 	  document.getElementsByName("key_"+n)[i].innerText = 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>

13/05/2006, 14h44
FremyCompany

si tu en cherche un tout fait et qui soit gratuit, je te conseille tiny MCE, c'est vraiment époustouflant !
03/07/2007, 10h34
houseman

peut-on ajouter un texte, table ou forme par défaut sur ce type d'editeurs ?