tableau dynamique avec surlignement de la ligne [Fait]

**hartecel** · 09/07/2008, 17h51

Bonjour,

Je souhaiterais créer un tableau dynamique sur le click d'un bouton . Les informations des champs (pas tous) sont ajoutées dans ce tableau. Pour l'instant, ça j'ai réussi à le faire. Maintenant, j'aimerais pouvoir cliquer sur une ligne du tableau et réafficher toutes les infos dans les champs au-dessus. Ce qui me pose problème c pour cliquer .

Qqn a une idée ??

Merci.

**SpaceFrog** · 09/07/2008, 17h59

3 possibilités :

soit 100% javascript
soit 50% ajax 50% php
soit 90%php 10%javascript

**Bovino** · 09/07/2008, 18h06

Ce qui me pose problème c pour cliquer .

Achète une souris !!!

Plus sérieusement,

ici, le this représente le td cliqué, tu peux ensuite accéder aux autres cellules de la ligne grâce au DOM (nextSibling, previousSibling)... en faisant attention aux différentes interprétations du DOM entre IE et les navigateurs.

EDIT:
Souligné à l'attention de SpaceFrog qui commet toujours l'erreur...

**hartecel** · 09/07/2008, 18h52

En faisant ça ,

Code :

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

<td onclick="taFonction(this)"></td>

j'ai une erreur de code. IE m'envoie l'erreur "non implementé".

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
 
function insAdresses(id, site, nomcontact, prenomcontact, lib, cp, ville, pays, telcontact, portcontact, faxcontact, mailcontact)
{       
	var letab	=	parent.document.getElementById('tabadresses'); 
 
	var myRow	=	letab.insertRow(letab.rows.length);
	var nr 		=	letab.rows[letab.rows.length-1];
 
	nr.insertCell(0);
	nr.cells[0].className =	"col3";
	nr.cells[0].innerHTML	=	"<input type='hidden' name='adresse[]' size='2' value='" + id + "'>" + "<input type='hidden' name='site[]' size='2' value='" + site + "'>" + site;
 
	nr.insertCell(1);
	nr.cells[1].className =	"col3";
	nr.cells[1].innerHTML	=	"<input type='hidden' name='nomcontact[]' size='2' value='" + nomcontact + "'>" + nomcontact;
 
	nr.insertCell(2);
	nr.cells[2].className =	"col3";
	nr.cells[2].innerHTML	=	"<input type='hidden' name='prenomcontact[]' size='2' value='" + prenomcontact + "'>" + prenomcontact;
 
	nr.insertCell(3);
	nr.cells[3].className =	"col3";
	nr.cells[3].innerHTML	=	"<table border='1'><tr ><td colspan='2'><input type='hidden' name='lib[]' size='2' value='" + lib + "'>" + lib + "</td></tr><tr><td><input type='hidden' name='cp[]' size='2' value='" + cp + "'>" + cp + "</td><td><input type='hidden' name='ville[]' size='2' value='" + ville + "'>" + ville + "</td></tr><tr><td colspan='2'><input type='hidden' name='pays[]' size='2' value='" + pays + "'>" + pays + "</td></tr></table>";
 
	nr.insertCell(4);
	nr.cells[4].className =	"col3";
	nr.cells[4].innerHTML	=	"<table border='0'><tr><td><input type='hidden' name='telcontact[]' size='2' value='" + telcontact + "'>" + telcontact + "</td></tr><tr><td><input type='hidden' name='portcontact[]' size='2' value='" + portcontact + "'>" + portcontact + "</td></tr><tr><td><input type='hidden' name='faxcontact[]' size='2' value='" + faxcontact + "'>" + faxcontact + "</td></tr></table>";
 
    nr.insertCell(5);
	nr.cells[5].className =	"col3";
	nr.cells[5].innerHTML	=	"<input type='hidden' name='mailcontact[]' size='2' value='" + mailcontact + "'>" + mailcontact;
 
    nr.onclick=function(){alert("coucou");};
}

Là le click marche.
Comme je voulais faire une fonction pour récupérer les valeurs de ligne en cours et les afficher dans un formulaire, c'est la galère.

Invité · 09/07/2008, 18h55

Bonjour,

Si tu crées le tableau dynamiquement tu peux y adjoindre des id

Exemple qui vaut ce qu'il vaut

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
 
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function retourne_val(id) {
document.getElementById("ch_" + 1).value = document.getElementById(id + "_1").innerHTML;
document.getElementById("ch_" + 2).value = document.getElementById(id + "_2").innerHTML;
document.getElementById("ch_" + 3).value = document.getElementById(id + "_3").innerHTML;
document.getElementById("ch_" + 4).value = document.getElementById(id + "_4").innerHTML;
}
// -->
</script>
</head>
<body>
<input type="text" id="ch_1" size="10" value="" />
<input type="text" id="ch_2" size="10" value="" />
<input type="text" id="ch_3" size="10" value="" />
<input type="text" id="ch_4" size="10" value="" /><br />
<br />
 
<table border="1">
<tr id="1" onClick="retourne_val(this.id)">
   <td id="1_1">aaaaaaaa</td>
   <td id="1_2">bbbbbbbb</td>
   <td id="1_3">ccccccc</td>
   <td id="1_4">ddddddd</td>
</tr>
<tr id="2" onClick="retourne_val(this.id)">
   <td id="2_1">eeeeeeeee</td>
   <td id="2_2">fffffffff</td>
   <td id="2_3">ggggggggg</td>
   <td id="2_4">hhhhhhhh</td>
</tr>
</table>
</body>
</html>

Jean-Luc

PS: il ne doit y avoir que du texte dans les TD pas de HTML sinon IE7 et FF3 renvoie le tout.

**hartecel** · 09/07/2008, 22h32

Est-ce que qqn a une idée pour récupérer les variable adresse[], ... en javascript ?
J'ai beau cherché , je trouve pas.

**SpaceFrog** · 09/07/2008, 22h45

Code :

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

document.getElementsByName('adresse[]')[i].value

**hartecel** · 10/07/2008, 00h12

Merci pour ton aide, mais ça ne marche pas. Ton "i" correspond à quoi ?

**hartecel** · 10/07/2008, 00h27

En fait , ça marche mais j'arrive pas à récupérer le numéro de la ligne cliquée.
J'ai essayé en mettant le i en dur et là c bon.
En tout cas, merci déjà pour l'info . Je vais essayer de chercher pr ce numéro de ligne.

**SpaceFrog** · 10/07/2008, 10h15

passe l'id en paramètre this.id et splitte sur ('_') ...

tu recupères alors l'element [0] du tableau obtenu qui est l'id du tr

Invité · 10/07/2008, 10h50

Un exemple simplifié

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
44
45
 
<html>
<head>
<title></title>
<script language="">
id = 0;
 
function insAdresses (site, nomcontact, prenomcontact, lib, cp, ville, pays, telcontact, portcontact, faxcontact, mailcontact)
{
         maLigne = document.createElement("tr");
         maLigne.id = id
         if (window.attachEvent) maLigne.attachEvent("onClick", function(){voir_nb_adresse(this.id)});
         if (window.addEventListener) maLigne.addEventListener("click", function(){voir_nb_adresse(this.id)}, false); 
         document.getElementById('tabadresses').appendChild(maLigne);
 
         macell = document.createElement("td");
         macell.id = "1_" + id;
         macell.className =	"col3";
         macell.innerHTML = "<input type='hidden' id='adresse_" + id + "' name='adresse[]' size='2' value='" + id + "'>" + "<input type='hidden' name='site[]' size='2' value='" + site + "'>" + site;
         document.getElementById(id).appendChild(macell);
 
         macell = document.createElement("td");
         macell.id = "2_" + id;
         macell.className =	"col3";
         macell.innerHTML = "<input type='hidden' name='nomcontact[]' size='2' value='" + nomcontact + "'>" + nomcontact;
         document.getElementById(id).appendChild(macell); 
 
         id++;
}
 
function voir_nb_adresse(num_id) {
         alert("id du tr = " + num_id + " et contenu de INPUT adresse_" + num_id + " => " + document.getElementById("adresse_" + num_id).value);
}
 
</script>
</head>
<body >
<input type="button" name="ajout_data" value="ajout data" onclick="insAdresses('site', 'nomcontact', 'prenomcontact', 'lib', 'cp', 'ville', 'pays', 'telcontact', 'portcontact', 'faxcontact', 'mailcontact')"/>
<!-- <input type="button" name="visu_adresse" value="voir adresse" onclick="voir_adresse()"/> -->
<table id="tabadresses" border="1">
 
</table>
 
</body>
</html>

Il fonctionne sous FF3.
Sous IE7 les éléments sont bien dans l'arbre DOM mais ne sont pas affichés ?
Je cherche.

**SpaceFrog** · 10/07/2008, 11h33

Code :

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

 macell.innerHTML = "<input type='hidden' id='adresse_" + id + "' name='adresse[]' size='2' value='" + id + "'>" +

Il faut passer par le DOM et createElement pour que les objets de formulaire soient réellement pris en compte coté client et coté serveur ...
cf dans les contributions FORM DYNAMIQUE ...

Invité · 10/07/2008, 11h48

Voilà une correction

Pour IE7 les TR sont enfant du TBODY, donc dans mon code ajout de lastChild (pour IE7 !!!!!!)
Pas réussi à faire fonctionner attachEvent sous IE7, je suis passé par .onClick

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
44
45
46
47
48
49
 
<html>
<head>
<title></title>
<script language="">
id = 0;
function insAdresses (site, nomcontact, prenomcontact, lib, cp, ville, pays, telcontact, portcontact, faxcontact, mailcontact)
{
         // ajout de TR  
         maLigne = document.createElement("tr");
         maLigne.id = id
         if (window.attachEvent) {
            maLigne.onclick = function(){voir_nb_adresse(this.id)};
            document.getElementById('tabadresses').lastChild.appendChild(maLigne);
         }
         else if (window.addEventListener) {
            maLigne.addEventListener("click", function(){voir_nb_adresse(this.id)}, false); 
            document.getElementById('tabadresses').appendChild(maLigne);
         }
 
         // ajout du 1er TD
         macell1 = document.createElement("td");
         macell1.id = "1_" + id;
         macell1.className =	"col3";
         macell1.innerHTML = "<input type='hidden' id='adresse_" + id + "' name='adresse[]' size='2' value='" + id + "'>" + "<input type='hidden' name='site[]' size='2' value='" + site + "'>" + site;
         document.getElementById(id).appendChild(macell1);
 
         // ajout du 2eme TD
         macell2 = document.createElement("td");
         macell2.id = "2_" + id;
         macell2.className =	"col3";
         macell2.innerHTML = "<input type='hidden' name='nomcontact[]' size='2' value='" + nomcontact + "'>" + nomcontact;
         document.getElementById(id).appendChild(macell2); 
 
         id++;
}
 
function voir_nb_adresse(num_id) {
         alert("id du tr = " + num_id + " et contenu de INPUT adresse_" + num_id + " => " + document.getElementById("adresse_" + num_id).value);
}
 
</script>
</head>
<body >
<input type="button" name="ajout_data" value="ajout data" onclick="insAdresses('site', 'nomcontact', 'prenomcontact', 'lib', 'cp', 'ville', 'pays', 'telcontact', 'portcontact', 'faxcontact', 'mailcontact')"/>
<table id="tabadresses" border="1"></table>
 
</body>
</html>

Voilà, voilà

**SpaceFrog** · 10/07/2008, 11h50

mais avec les input en innerHTML tu cours au devant des problèmes, ils riquent de ne pas être reconnus coté serveur ...

Invité · 10/07/2008, 12h11

Allez, tout par le DOM
Et avec un petit effet, lachons-nous

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<html>
<head>
<title></title>
 
<script language="">
id = 0;
function insAdresses (site, nomcontact, prenomcontact, lib, cp, ville, pays, telcontact, portcontact, faxcontact, mailcontact)
{
         // ajout de TR  
         maLigne = document.createElement("tr");
         maLigne.id = id
         if (window.attachEvent) {
            maLigne.onmouseenter = function() {this.style.backgroundColor = "lime";};
            maLigne.onmouseleave = function() {this.style.backgroundColor = "";};
            maLigne.onclick = function(){voir_nb_adresse(this.id)};
            document.getElementById('tabadresses').lastChild.appendChild(maLigne);
         }
         else if (window.addEventListener) {
            maLigne.addEventListener("mouseover", function() {this.style.backgroundColor = "lime"}, false); 
            maLigne.addEventListener("mouseout", function() {this.style.backgroundColor = ""}, false);
            maLigne.addEventListener("click", function(){voir_nb_adresse(this.id)}, false);
            document.getElementById('tabadresses').appendChild(maLigne);
         }
 
         // ajout du 1er TD
         macell1 = document.createElement("td");
         macell1.id = "1_" + id;
         macell1.className =	"col3";
         document.getElementById(id).appendChild(macell1);
 
         // ajout 1er input hidden
         moninput1 = document.createElement("input");
         moninput1.type = "hidden";
         moninput1.id = "adresse_" + id;
         moninput1.name = "adresse[]";
         moninput1.size = 2;
         moninput1.value = id;
         document.getElementById(macell1.id).appendChild(moninput1);
 
         // ajout 2eme input hidden
         moninput2 = document.createElement("input");
         moninput2.type = "hidden";
         moninput2.name = "site[]";
         moninput2.size = 2;
         moninput2.value = site;
         document.getElementById(macell1.id).appendChild(moninput2);
 
         // ajout du texte dans la cellule (TextNode)
         montext1 = document.createTextNode(site);
         document.getElementById(macell1.id).appendChild(montext1);
 
         // ajout du 2eme TD
         macell2 = document.createElement("td");
         macell2.id = "2_" + id;
         macell2.className =	"col3";
         document.getElementById(id).appendChild(macell2); 
 
         // ajout input hidden
         moninput22 = document.createElement("input");
         moninput22.type = "hidden";
         moninput22.name = "moncontact[]";
         moninput22.size = 2;
         moninput22.value = nomcontact;
         document.getElementById(macell2.id).appendChild(moninput22);
 
         // ajout du texte dans la cellule (TextNode)
         montext2 = document.createTextNode(nomcontact);
         document.getElementById(macell2.id).appendChild(montext2);
 
         id++;
}
 
function voir_nb_adresse(num_id) {
         alert("id du tr = " + num_id + " et contenu de INPUT adresse_" + num_id + " => " + document.getElementById("adresse_" + num_id).value);
}
 
</script>
</head>
<body >
<input type="button" name="ajout_data" value="ajout data" onclick="insAdresses('site', 'nomcontact', 'prenomcontact', 'lib', 'cp', 'ville', 'pays', 'telcontact', 'portcontact', 'faxcontact', 'mailcontact')"/>
<table id="tabadresses" border="1"></table>
 
</body>
</html>

Cependant, pour attachEvent ???

**d-Rek** · 10/07/2008, 12h16

Je plussoie.
Attention à l'attribution du name "dynamiquement" :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createE(type, name){
    if(document.all){ // Thanks to IE
        var e=document.createElement('<'+type+' name="'+name+'">');
    }else{
        var e=document.createElement(type);
        e.name=name;
    }
    return e;
}
 
var element=createE('input', 'nom_element');
element.value='yapuka';
element.id='ilfautque';
document.body.appendChild(element);

**SpaceFrog** · 10/07/2008, 12h25

dRek ... c'est pris en compte dans le script proposé dans les contributions ...

Jl pour ce qui est du attachevent ...
Etant d'un naturel pragmatique, j'ai tendance à n'utiliser que ce qui marche de façon sûre en crossBrowser ...
j'attribue simplement les évènements par l'attribution de fonctions

Code :

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

obj.evenement=function(){}

c'est d'ailleurs aussi pris en compte dasn le script des contributions...

Invité · 10/07/2008, 13h06

Voilà pour le name et les évènements et de la couleur

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<html>
<head>
<title></title>
 
<script language="javascript">
id = 0;
function insAdresses (site, nomcontact, prenomcontact, lib, cp, ville, pays, telcontact, portcontact, faxcontact, mailcontact)
{
         // ajout de TR  
         maLigne = document.createElement("tr");
         maLigne.id = id
         maLigne.onmouseover = function() {this.style.backgroundColor = "lime";};
         maLigne.onmouseout = function() {this.style.backgroundColor = "";};
         maLigne.onclick = function(){voir_nb_adresse(this.id)};
         (document.all) ? document.getElementById('tabadresses').lastChild.appendChild(maLigne) : document.getElementById('tabadresses').appendChild(maLigne);
 
         // ajout du 1er TD
         macell1 = document.createElement("td");
         macell1.id = "1_" + id;
         macell1.className =	"col3";
         document.getElementById(id).appendChild(macell1);
 
         // ajout 1er input hidden
         if(document.all) {
                  moninput1 = document.createElement('<input name="adresse[]">') 
         }
         else {
                  moninput1 = document.createElement("input");
                  moninput1.name = "adresse[]";
         }
         moninput1.type = "hidden";
         moninput1.id = "adresse_" + id;
 
         moninput1.size = 2;
         moninput1.value = id;
         document.getElementById(macell1.id).appendChild(moninput1);
 
         // ajout 2eme input hidden
         if(document.all) {
                  moninput2 = document.createElement('<input name="site[]">') 
         }
         else {
                  moninput2 = document.createElement("input");
                  moninput2.name = "site[]";
         }
         moninput2.type = "hidden";
         moninput2.size = 2;
         moninput2.value = site;
         document.getElementById(macell1.id).appendChild(moninput2);
 
         // ajout du texte dans la cellule (TextNode)
         montext1 = document.createTextNode(site);
         document.getElementById(macell1.id).appendChild(montext1);
 
         // ajout du 2eme TD
         macell2 = document.createElement("td");
         macell2.id = "2_" + id;
         macell2.className =	"col3";
         document.getElementById(id).appendChild(macell2); 
 
         // ajout input hidden
         if(document.all) {
                  moninput22 = document.createElement('<input name="moncontact[]">') 
         }
         else {
                  moninput22 = document.createElement("input");
                  moninput22.name = "moncontact[]";
         }
         moninput22.type = "hidden";
         moninput22.size = 2;
         moninput22.value = nomcontact;
         document.getElementById(macell2.id).appendChild(moninput22);
 
         // ajout du texte dans la cellule (TextNode)
         montext2 = document.createTextNode(nomcontact);
         document.getElementById(macell2.id).appendChild(montext2);
 
         id++;
}
 
function voir_nb_adresse(num_id) {
         alert("id du tr = " + num_id + " et contenu de INPUT adresse_" + num_id + " => " + document.getElementById("adresse_" + num_id).value);
}
 
</script>
</head>
<body >
<input type="button" name="ajout_data" value="ajout data" onclick="insAdresses('site', 'nomcontact', 'prenomcontact', 'lib', 'cp', 'ville', 'pays', 'telcontact', 'portcontact', 'faxcontact', 'mailcontact')"/>
<table id="tabadresses" border="1"></table>
 
</body>
</html>

On en apprend des choses !

**l_dl_d** · 11/07/2008, 12h00

bonjour,

j'ai testé votre programme, je souhaiterais le changer de façon est ce que les lettres s'affichent à côté, cad une lettre a côté d'une autre ex(abcd) dans la même zone de texte.

j'ai besoin de ce script pour pouvoir écrire dans une zone de texte un ensemble de caractères spéciaux qui n'existent pas sur le clavier (caractères phonétiques).

Je vous remercie pour votre aide, je ne suis pas forte en javascript!!!

**SpaceFrog** · 11/07/2008, 12h11

heu zone de texte ...
dans un input ???
dans un tr ???

tableau dynamique avec surlignement de la ligne [Fait]

JavaScript

Discussions similaires

Partager

Partager