[DOM] Les nodes dans le modèle DOM

**Bele'nos** · 07/03/2005, 17h02

Bonjour 8) ,
j'ai un problème avec les nodes,
je voudrais implanter les attributs cellspacing et cellpadding dans toute les balises <table> de ma page et leurs donner la valeur 0.
Les solutions CSS n'étant pas aprouvée par le w3 et dépendant des différents navigateurs, je voudrais le faire avec les nodes.
Voilà ce que j'ai fais mais sans succès:

Code :

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

1
2
window.document.getElementsByTagName("table")[1].setAttributeNode("cellspacing").setAttribute("0");
window.document.getElementsByTagName("table")[1].setAttributeNode("cellpadding").setAttribute("0");

Le [1] est volontaire ne sachant pas comment on fais pour sélectionner tous les <table>.Il n'y a pas de retour chariot en milieu de code.

Si quelqu'un avait la bonté de m'expliqué ce qui cloche je lui serait très reconnaissant (il se peut que ce ne soit pas du tout comme ça que ça fonctionne

:

)

**SpaceFrog** · 07/03/2005, 17h38

Code :

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

1
2
3
4
for (i=0;i<document.getElementsByTagName("table").lenght;i++){
document.getElementsByTagName("table")[i].setAttribute("cellpadding","0")
document.getElementsByTagName("table")[i].setAttribute("cellspacing","0")
}

**Bele'nos** · 07/03/2005, 17h55

Merci de me préter attention

La solution me parait bonne, en tout cas pour faire varier le i mais ça ne marche pas je doit me tromper autre part.

Normalement (je croit), il suffit de mettre le srcipt dans le <head>. Il n'y a pas besoin de le mettre dans une fonction

: le for marche seul ou il faut toujours tout appeler avec une fonction et un onAction="ma fonction()"

:

Je doit avouer que je suis un peut embrouillé j'ai pourtant lu pas mal de tutoriaux

**Celelibi** · 07/03/2005, 18h50

Le fait de mettre le script dans le <head> va faire qu'il sera exécuté avant la fin du chargement de la page, donc à ce moment là tes balises <table> ne seront pas encore chargée. Mieux appeller la fonction sur l'évènenement onload.

ceci dit le pense que tu devrais normalement pouvoir simplement remplacer ces scripts par ces quelques lignes de css qui je pense marchent aussi avec IE :

Code :

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

1
2
3
4
5
6
table {
  border-spacing: 0px;
}
table, table td {
  padding: 0px;
}

Si ce code ne marche pas avec IE rien ne t'empêche de rajouter les styles qui marche pour ce navigateur en plus. Chaque navigateur n'interprête que les règles styles qu'il connais.

**Bele'nos** · 07/03/2005, 21h16

Je vous remercie déjà de vos réponses

.
La solution du css fonctionne pour sûr, seulement j'aurait bien voulu y arriver avec les nodes juste pour voir si ça marche.
Voilà mon code actuel (qui est un test préalable à ma page finale):

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
<html> 
 
<head>
<title>test</title>
<script type="text/JavaScript">
function cell() {
for (i=0;i<document.getElementsByTagName("table").lenght;i++){ 
document.getElementsByTagName("table")[i].setAttribute("cellpadding","0") 
document.getElementsByTagName("table")[i].setAttribute("cellspacing","0") 
} 
}
</script>         
</head>
 
<body onLoad="cell()">
<table style="background:#ff0000;">
<tr><td style="background:#00ff00;">
<a href="javascript:cell()">changer les propriétés du tableau</a>
</td><td style="background:#00ff00;">
<p>blabla</p>
</td></tr>
</table>
</body>
 
</html>

Le code est fait pour qu'on voit la fusion de manière évidente avec les couleurs de fonds.
J'ai fait deux appel de la même fonction et bien sûr sans résultat.
Si quelqu'un peut trouver ce qui ne va pas se serait cool 8) .
Je suis sur IE. Merci pour vos future réponse.

**Bele'nos** · 07/03/2005, 22h43

Le problème est résolu 8) d'une autre façon qu'avec les nodes ou le ccs vaseux qui tourne autour de cette propriété et qui dépend des navigateurs.

La solution est:

Code :

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

1
2
3
4
for (i=0;i<document.getElementsByTagName("table").length;i++) { 
document.getElementsByTagName("table")[i].cellSpacing="0"; 
document.getElementsByTagName("table")[i].cellPadding="0"; 
}

Merci à vous et à eux

[DOM] Les nodes dans le modèle DOM

JavaScript

Discussions similaires

Partager

Partager