tableau dynamique avec surlignement de la ligne

Version imprimable

09/07/2008, 17h51
hartecel

tableau dynamique avec surlignement de la ligne

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.
09/07/2008, 17h59
SpaceFrog

3 possibilités :

soit 100% javascript
soit 50% ajax 50% php
soit 90%php 10%javascript
09/07/2008, 18h06
Bovino

Citation:

Ce qui me pose problème c pour cliquer .

Achète une souris !!! :mouarf3:
Plus sérieusement,

Citation:

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

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

En faisant ça ,

Code:

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

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

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

Bonjour,

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

Exemple qui vaut ce qu'il vaut

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

09/07/2008, 22h32
hartecel

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

Code:

document.getElementsByName('adresse[]')[i].value
10/07/2008, 00h12
hartecel

Merci pour ton aide, mais ça ne marche pas. Ton "i" correspond à quoi ?
10/07/2008, 00h27
hartecel

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.
10/07/2008, 10h15
SpaceFrog

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

Un exemple simplifié

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

10/07/2008, 11h33
SpaceFrog

Code:

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

:nono:

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

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:

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à

10/07/2008, 11h50
SpaceFrog

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

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

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

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

Code:

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

10/07/2008, 12h25
SpaceFrog

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:

obj.evenement=function(){}

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

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

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

11/07/2008, 12h00
l_dl_d

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

:oops:
11/07/2008, 12h11
SpaceFrog

heu zone de texte ...
dans un input ???
dans un tr ???
11/07/2008, 12h17
Invité

Bonjour

Moi pas comprendre non plus.
Et peu plus d'info svp

Merci