[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++)

@+

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

**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, 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 ?

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

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

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

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 !

**lalouve** · 13/05/2006, 14h16

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

Essaie ça :

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

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

je vois maintenant... sorry
en fait les homonymes c pas bon...

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

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 !

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

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 :

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