DOM - Title ALt

**tavarlindar** · 11/06/2012, 19h05

Bonjour,

Comment ajouter dans un tableau en utilisant le DOM un texte pour le quel l'utilisateur peut obtenir des infos s'il survole le texte avec sa souris.
En HTML j'ai un code du type

Code :

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

1
2
 
<td style='text-align: left;' alt='info utilisateur' title='info utilisateur'><span id='AZE1'>Lapin</span></td>

Je souhaite pouvoir construire la même chose mais avec des instruction DOM :
exemple :

Code :

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

1
2
3
4
5
6
7
8
 
var row = document.createElement("tr");
 
// Cellule 1 Nom 
                cell = document.createElement("td");
                texte = document.createTextNode('Lapin');
               cell.appendChild(texte);
                row.appendChild(cell);

Par avance merci

Tavar

Invité · 11/06/2012, 19h11

salut,

avec l'emploi de setAttribute (premier argument étant donc title)

**tavarlindar** · 11/06/2012, 20h04

Bonjour galerien69,

Tout d'abord merci. Avant de poster, j'ai effectivement essayé de mettre :

Code :

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

1
2
3
4
5
6
 
cell = document.createElement("td");
                var texte = document.createTextNode('lapin');
                texte.setAttribute('title','info utilisateur');
		cell.appendChild(texte);
                row.appendChild(cell);

Mais à priori, je suis à côté de la plaque.

Je me demande si je doit utiliser un createTextNode('lapin'); ou autre chose

Invité · 11/06/2012, 20h54

non.

Code :

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

<td title="lol">lapin</td>

Tu as un node td
et tu as un textNode qui contient lapin.

L'attribut title est sur le td et non sur le textNode.

(donc tu dois appeler setAttribute sur ton td)

**Eric2a** · 11/06/2012, 20h58

Salut,

Le texte peut être contenu dans la balise <span> qui elle même contient l'attribut title.

Avec...

Code js :

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

1
2
3
4
5
6
7
8
cell=document.createElement('td');
 
var span=document.createElement('span');
span.setAttribute('title','info utilisateur');
span.appendChild(document.createTextNode('Lapin'));
 
cell.appendChild(span);
row.appendChild(cell);

On obtient

Code :

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

1
2
3
<tr>
	<td><span title="info utilisateur">Lapin</span></td>
</tr>

Edit : Oups ! Oui, c'est mieux sur le <td> directement

**tavarlindar** · 11/06/2012, 21h34

Encore merci galerien69 pour votre réponse, mais je n'y suis pas arrivé. En revanche le code de Eric2a fonctionne parfaitement.
Le hic, c'est qu'il est d'accord avec vous.

Bon, j'avoue, je programme rarement, et me remettre avec les notation DOM, c'est dure dure.
Je préfère apprendre à pêcher qu'on me donne du poisson, mais là je suis preneur du poisson (code).

Encore merci,

Tavar
promis, je vais relire des tutos ...

Invité · 11/06/2012, 21h46

rien de différent...

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
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
 
	window.onload=function(){
	  var tr=document.getElementById('lol');
	  var td=document.createElement('td');
	  td.setAttribute('title','I am the title');
	  td.innerHTML='lapin';
	  tr.appendChild(td);
	}
	</script>
</head>
<body>
<table><tr id="lol"></tr></table>
</body>
</html>

DOM - Title ALt

JavaScript

Vue hybride

Discussions similaires

Partager

Partager