[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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager