[DOM] ajouter un element dynamiquement dans un tableau (<table>)

Version imprimable

Bonjour,

je suis debutant en programmation javascript et je cherche a développer un petit script pour greasemonkey, la page sur laquel le script va s'excuter et de ce type :

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
 
<html>
<head>
<title>test</title>
</head>
<body>
 
 
<table>
<tr>
<th class="sep">HEURE</th>
<th class="sep">ARTISTE</th>
<th class="sep">TITRE</th>
<th class="sep">Commander</th>
</tr>
 
<tr>
<td>14:05</td>
<td>James Brown</td>
<td><em>Papa's got a brand new bag</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : James Brown / Papa\'s got a brand new bag','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>14:02</td>
<td>Fujiya & Miyagi</td>
<td><em>Sore thumb</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Fujiya & Miyagi / Sore thumb','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>13:58</td>
<td>Bob Henzel</td>
<td><em>World keeps spinning</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Bob Henzel / World keeps spinning','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>13:55</td>
<td>Ice Cube</td>
<td><em>You know how we do it</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Ice Cube / You know how we do it','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>13:52</td>
<td>Bahta Gebre Heywet</td>
<td><em>Ewnet yet lagegnesh</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Bahta Gebre Heywet / Ewnet yet lagegnesh','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>13:48</td>
<td>Map Of Africa</td>
<td><em>Bone</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Map Of Africa / Bone','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>13:45</td>
<td>Sylvester</td>
<td><em>I've been down</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Sylvester / I\'ve been down','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
</table>
 
</body>
</html>

le page represente un tableau , avec le nom de la chanson , de l'artiste et l'heure a laquelle la chanson à été diffusé , ainsi qu'une case vers la fnac pour commander le cd.

Je souhaiterais que mon script ajoute dans la meme case ou il y a le lien fnac , un lien vers le site myspace avec le nom de l'artiste directement en recherche.

Donc clairement je cherche a récupérer le nom de l'artiste se trouvant sur la même ligne dans la 2em colonne , et d'ajouter un lien toujours sur la meme ligne dans la derniere colonne vers le site myspace.

S'il y a des pros du javascript merci de m'orienter , qu'elle est la solution la plus simple ? avez vous des scripts d'exemple d'action réaliser ds un tableau pour que je puisse m'en inspirer ?

d'avance merci

12/01/2009, 09h18
le_chomeur

Bonjour ,
tu peux déja commencer par regarder la Faq notamment l'insertion de ligne dans un tableau , après je te conseillerais de regarder le DOM pour ajouter des éléments dans une page html :)
12/01/2009, 19h29
Skanking

Merci le_chomeur d'avoir repondu , je souhaite pas ajouter une ligne dans un tableau mais juste ajouter le lien dans une case dejà existante ( la ou il y a le lien vers la fnac)
il me semble qu'il faudrait faire une boucle qui cherche toutes les balises <td> mais comment lui indiquer dans quelle case y ajouter mon lien étant donnée qu'il n'y a aucun id associé
12/01/2009, 23h09
le_chomeur

en parcourant tes td exemple :

var mesTD = document.getElementById('tontableau').getElementsByTagName('td');

mesTD est donc un tableau de td ... si tu sais laquelle remplir ( par x méthode , si elle contient une image , si c'est la 5 eme etc ...

matd = mesTD[i] ; // i = l'index de la td souhaité

matd.appendChild(tonlien) ; // tonlien au format DOM :)

Voila schématiquement :)

j'ai reussi à faire un debut de script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // pour chaque lien, on cherche si c'est un lien qui contient "www3.fnac.com" // si c'est le cas, c'est la case qui nous interesse for (var i=0; i < document.getElementsByTagName('a').length; i++) { var matches = document.getElementsByTagName('a')[i].href.match(/www3.fnac.com/); if (matches) { //je remonte à la balise td var sNom = "" var oNode = document.getElementsByTagName('a')[i]; oNode = oNode.parentNode; sNom = oNode.nodeName; alert(sNom); } }
En suite je suis bloqué que dois-je utiliser pour ajouter un lien dans ma balise td .remplace, innerHTML , ou appenchild ?

je cherche desesperement des exemples sur comment ajouter un lien dans une balise <td> mais je ne trouve rien

admettons :

Code:

1
2
3
4
5
6
7
8
 
var macellule ; // ( est déja un td je zapp la procédure de selection ...
 
var monlien = document.createElement('a'); //lien
monlien.href="www.developpez.com"; // la ref
monlien.appendChild(document.createTextNode('un super site')); // le text
 
macellule.appendChild(monlien); //insertion dans la cellule

15/01/2009, 18h16
Skanking
Merci :D ça fonctionne nickel :yaisse2:

derniere petite question , si je veux mettre une image à la place d'un texte pour le lien, je suppose que c'est dans la methode suivante ?
Code:

1 2 monlien.appendChild(document.createTextNode('un super site')); // le text
dois-je juste mettre une balise <img src= .....> à la place du texte ou il y a une particularité ?

Code:

1
2
3
var monImg = document.createElement('img');
monImg.src = "source de l'image";
monlien.appendChild(monImg);

;-) n'oublies pas le tag résolu ^^

15/01/2009, 19h07
Skanking

Merci

bonjour,

je me permet de re-ouvrir le topic car je suis face à un nouveau probléme sur le même sujet.
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 for (var i=0; i < document.getElementsByTagName("TR").length; i++) { // Selection de la ligne (i = numero de ligne) var Ligne = document.getElementsByTagName("TR")[i]; // Selection de la colonne Artiste var Artiste = Ligne.getElementsByTagName("TD")[1]; var NomArtiste = Artiste.innerHTML; alert (NomArtiste); // Selection de la derniere colonne //var oNode = Ligne.getElementsByTagName("TD")[3]; var oNode = document.getElementsByTagName('td')[3]; oNode = oNode.parentNode; //génération du lien myspace var lienmyspace = document.createElement('a'); //lien lienmyspace.target ="_blank" lienmyspace.href="http://searchservice.myspace.com/index.cfm?fuseaction=sitesearch.results&qry="+encodeURI(NomArtiste)+"&type=AllMySpace"; var ImgMySpace = document.createElement('img'); ImgMySpace.src = "http://www.myspace.com/favicon.ico"; lienmyspace.appendChild(ImgMySpace); oNode.appendChild(lienmyspace); }
mes problèmes sont les suivants :

lorsque je mets un valeur en dur sur cette portion de code :
Code:

1 2 // Selection de la ligne (i = numero de ligne) var Ligne = document.getElementsByTagName("TR")[i];
ca fonctionne or lorsque je met "i" ça ne fonctionne plus je ne comprend pas pourquoi , de plus la console d'erreur de mon navigateur me renvoit le message suivant :
Code:

1 2 3 4 Erreur*: Artiste is undefined Fichier Source*: file:///Users/tom/Library/Application%20Support/Firefox/Profiles/d2snpbvx.default/gm_scripts/hello_world/hello_world.user.js Ligne*: 92
Alors que Artiste est bien définie.

Dernier probléme depuis que je suis en "dynamique" dans la boucle "for" au lieu de m'ajouter le lien dans la case il me met le lien sur la bonne nligne mais en dehors de la case.

Merci d'avance de m'éclairer

19/01/2009, 19h39
Auteur
bonjour,

Code:

document.getElementsByTagName("TR")

si tu as plusieurs tableaux dans la page, il va prendre tous les TR présents dans la page. Or l'indice de la ligne du tableau retourné par la méthode ne va pas forcément correspondre à un numéro de ligne du tableau.

Fais donc un getElementsByTagName("TR") sur le tableau pas sur le document :
Code:

1 2 var lignes = document.getElementById("idTableau").getElementsByTagName("tr");

Merci d'avoir répondu , je n'ai qu'un seul tableau dans ma page et de plus il n'a pas d'id il se presente comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<table>
<tr>
<th class="sep">HEURE</th>
<th class="sep">ARTISTE</th>
<th class="sep">TITRE</th>
<th class="sep">Commander</th>
</tr>
 
<tr>
<td>14:05</td>
<td>James Brown</td>
<td><em>Papa's got a brand new bag</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : James Brown / Papa\'s got a brand new bag','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>
 
<tr>
<td>14:02</td>
<td>Fujiya & Miyagi</td>
<td><em>Sore thumb</em></td>
<td style="text-align: center;"><a href="http://www3.fnac.com/..." target="_blank" title="Commander avec fnac.com" onclick="xt_med('C','','[F] QuoiCeTitre : Fujiya & Miyagi / Sore thumb','S')"><img src="/_template/base/style/icon_ctkoi2_commander.gif" alt="Commander avec fnac.com" /></a></td>
</tr>

si je remplace

Code:

var lignes = document.getElementById("idTableau").getElementsByTagName("tr");

par

Code:

var lignes = document.getElementByTagName("table").getElementsByTagName("tr");

ca pourrait fonctionner ?

Citation:

Envoyé par Skanking

si je remplace

Code:

var lignes = document.getElementById("idTableau").getElementsByTagName("tr");

par

Code:

var lignes = document.getElementsByTagName("table").getElementsByTagName("tr");

ca pourrait fonctionner ?

tu peux tester... en ajoutant le "s" manquant ;)
Pour générer ton lien, pourquoi tu remontes au noeud parent du TD (qui est le TR) ?

Ensuite tu peux simplifier ton code, essaye ceci (je déteste les déclarations de variables au milieu d'un code :aie:) :
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 var i; var tableau = document.getElementsByTagName("table"); // tableau var lignesTab = tableau.getElementsByTagName("tr"); // lignes du tableau var n = lignesTab.length; // nombre de lignes var ligne, cellules; var artiste, nomArtiste; var lienMySpace, imgMySpace; for (i=0; i < n; i++) { // Selection de la ligne (i = numero de ligne) ligne = lignesTab[i]; // cellules de la ligne i : cellules = ligne.getElementsByTagName("td"); // Selection de la colonne Artiste (colonne 1) artiste = cellules[1]; nomArtiste = artiste.innerHTML; alert (nomArtiste); //génération du lien myspace dans la colonne 3 lienMySpace = document.createElement("a"); //lien lienMySpace.target ="_blank" lienMySpace.href = "http://searchservice.myspace.com/index.cfm?fuseaction=sitesearch.results&qry="+encodeURI(NomArtiste)+"&type=AllMySpace"; imgMySpace = document.createElement('img'); imgMySpace.src = "http://www.myspace.com/favicon.ico"; lienMySpace.appendChild(imgMySpace); cellules[3].appendChild(lienMySpace); }

Merci pour la simplification du code c'est vrai que ça fait plus propre et surtout c'est plus lisible néanmoins j'obtiens l'erreur suivante :
Code:

1 2 3 4 Erreur*: tableau.getElementsByTagName is not a function Fichier Source*: file:///Users/tom/Library/Application%20Support/Firefox/Profiles/d2snpbvx.default/gm_scripts/hello_world/hello_world.user.js Ligne*: 144
ne serait ce pas "document" à la place de "tableau" ?
Code:

1 2 3 4 var tableau = document.getElementsByTagName("table"); // tableau var lignesTab = document.getElementsByTagName("tr"); // lignes du tableau var n = lignesTab.length;

Citation:
Envoyé par Skanking
Merci pour la simplification du code c'est vrai que ça fait plus propre et surtout c'est plus lisible néanmoins j'obtiens l'erreur suivante :
Code:

1 2 3 4 Erreur*: tableau.getElementsByTagName is not a function Fichier Source*: file:///Users/tom/Library/Application%20Support/Firefox/Profiles/d2snpbvx.default/gm_scripts/hello_world/hello_world.user.js Ligne*: 144
ne serait ce pas "document" à la place de "tableau" ?
non en fait getElementsByTagName() retourne une collection d'objets donc la syntaxe est :
Code:

1 2 3 4 var tableau = document.getElementsByTagName("table"); // tableau var lignesTab = tableau[0].getElementsByTagName("tr"); // lignes du tableau var n = lignesTab.length;
Ensuite je m'aperçois que ta boucle va planter. En effet pour i=0, la fonction

Code:

cellules = ligne.getElementsByTagName("td");

ne va rien retourner car sur la ligne 0, ce ne sont pas des TD mais des TH. Donc commence ta boucle à 1 et non à 0.

Code:

for (i=1; i < n; i++)

21/01/2009, 18h52
Skanking

Merci ça fonctionne parfaitement. Admettons que je souhaite mettre un espace entre les icones ( entre le caddy et l'icone myspace)

http://img132.imageshack.us/img132/2...age1nd4.th.png

est-ce bien la méthode createTextNode(valeur) avec la valeur ( )
?
21/01/2009, 18h56
franculo_caoulene

Sachant que ces images existeront, il vaut mieux définir une marge en CSS et affecter cette classe CSS à l'élément au moment de sa création.
22/01/2009, 09h41
le_chomeur
+1 voir affecter une class css sur la td genre :
Code:

1 2 3 .latd img{ margin:2px; }
et ajouter la classe sur la td :

( au moment de la création )

Code:

latd.className = "latd"

Merci pour l'aide mais j'ai utilisé cela :

Code:

1
2
3
4
ImgMySpace = document.createElement('img');
	ImgMySpace.style.marginLeft="3px";
	ImgMySpace.src = "http://www.myspace.com/favicon.ico";
	lienMySpace.appendChild(ImgMySpace);

24/01/2009, 11h40
le_chomeur

lol aussi :)