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

**Skanking** · 11/01/2009, 21h53

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 :

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

**le_chomeur** · 12/01/2009, 09h18

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

**Skanking** · 12/01/2009, 19h29

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é

**le_chomeur** · 12/01/2009, 23h09

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

**Skanking** · 15/01/2009, 16h32

j'ai reussi à faire un debut de script :

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

**le_chomeur** · 15/01/2009, 17h46

admettons :

Code :

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

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

**Skanking** · 15/01/2009, 18h16

Merci

ça fonctionne nickel

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 :

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

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

**le_chomeur** · 15/01/2009, 18h59

Code :

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

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

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

**Skanking** · 15/01/2009, 19h07

Merci

**Skanking** · 19/01/2009, 19h31

bonjour,

je me permet de re-ouvrir le topic car je suis face à un nouveau probléme sur le même sujet.

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

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

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 :

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

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

**Auteur** · 19/01/2009, 19h39

bonjour,

Code :

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

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 :

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

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

**Skanking** · 19/01/2009, 19h50

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 :

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

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

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

par

Code :

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

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

ca pourrait fonctionner ?

**Auteur** · 19/01/2009, 23h16

Envoyé par Skanking

si je remplace

Code :

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

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

par

Code :

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

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

) :

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

**Skanking** · 19/01/2009, 23h57

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 :

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

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 :

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

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

**Auteur** · 20/01/2009, 11h13

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 :

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

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 :

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

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 :

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

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 :

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

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

**Skanking** · 21/01/2009, 18h52

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

est-ce bien la méthode createTextNode(valeur) avec la valeur (&nbsp

?

**franculo_caoulene** · 21/01/2009, 18h56

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.

**le_chomeur** · 22/01/2009, 09h41

+1 voir affecter une class css sur la td genre :

Code :

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

1
2
3
.latd img{
margin:2px;
}

et ajouter la classe sur la td :

( au moment de la création )

Code :

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

latd.className = "latd"

**Skanking** · 23/01/2009, 23h52

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

Code :

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

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

**le_chomeur** · 24/01/2009, 11h40

lol aussi

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

JavaScript

Discussions similaires

Partager

Partager