Discussion :

[Invité]

Bonjour à vous ami développeur !

Je viens vous demander votre aide sur un sujet que je ne maitrise pas du tout !

Voilà un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
<table>
   <tr>
        <td id="id1"></td>
        <td> </td>
   </tr>
    <tr>
        <td id="id2"></td>
        <td> </td>
   ......
</table>

J'ai un tableau avec une multitude de ligne, où chaque première colone est identifié par un ID unique.
Maintenant j'ai besoin d'accéder au second <td> ( modifier son contenu par un innerHTML ) : j'ai bien sûr la solution de donner un Id au secondes colones, mais cela allourdiré beaucoup le code, alors je voudrais savoir si il y a possibilité d'avoir ce résultat en utilisant le Dom, Xml ou je ne sais quoi d'autres !

Merci de me fournir de l'aide ou de la doc à ce sujet !

[javatwister]

j'ai besoin d'accéder au second Id

sûrement pas! sinon tu ne poserais pas la question...

[ozzmax]

mais pk donner un id à tous les td alourdirais le code?

[Invité]

javatwister

J'avais fait une faute : il s'agit du second TD pas ID ta répondu avant que je corrige

ozzmax

Ironique ou non cette question ? J'ai un tableau de 20 lignes, définir 40 id="xx" sa fait beaucoup je trouve !

[Swoög]

Salut

je pense que tu dois pouvoir y accéder via nextSibling :

Code :

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

document.getElementById('id1').nextSibling()

[FremyCompany]

Salut

je pense que tu dois pouvoir y accéder via nextSibling :

Code :

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

document.getElementById('id1').nextSibling()

IE Only... Non ?

[Swoög]

IE Only... Non ?

C'est dans la doc "DOM pour ECMA Script" du W3C ... : http://www.w3.org/TR/2000/WD-DOM-Lev...e-binding.html

donc je pense que FF doit l'accepter aussi

[Invité]

Bon je vois qu'aujourd'hui ya du monde sur le forum alors je vais vous mettre la totale !

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
 
// Pr gagner un peu en lisibilité 
function miseEnForme($id) {
    $a='onFocus="$(\'td'.$id.'\').className=\'inputbg_over\'" onBlur="$(\'td'.$id.'\').className=\'inputbg\'"';
    return $a;
}
 
<table id="inscription">
            <tr>
                <td style="width:100px;">Civilité</td>
                <td id="td1" style="color:#00A8FF; font-weight:normal">
                    <input type="radio" name=civilite" value="mr" id="civilite1"> Mr .......
                </td>
                <td><!-- Td réservé pour afficher les éventuelles erreurs --></td>
            </tr>
            <tr>
                <td>Nom</td>
                <td id="td2" class="inputbg" >
                    <input type="text" name="nom" id="nom" class="input" '.miseEnForme(2).'>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>Prénom</td>
                <td id="td3" class="inputbg" >
                    <input type="text" name="prenom" id="prenom" class="input" '.miseEnForme(3).'>
                </td>
                <td></td>
            </tr>
.........
......

C'est pour un formulaire d'inscription.
Je définis les ID td1, td2, td3 ... pour permettre des effets spéciaux au Focus et au Blur.

Ensuite je lance un peu d'AJAX : quand le formulaire perd le focus, on va vérifier le contenu des champs et afficher l'éventuelle erreur dans le 3ème <td> des lignes.
C'est sur que je pourrais donner un id à tout les 3ème TD et modifier leur contenu par un simpe getElementById('id') et même $('id') gràce à prototype, mais j'aimerais bien savoir comment faire pour m'affranchir de cette contrainte qui en plus allourdi le code !

ONLINE ICI : WixPay

[javatwister]

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
 
<table id="tab">
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
</table>
 
<script type="text/javascript">
 
var t=document.getElementById("tab").rows;
 
for(i in t){
 t[i].onclick=function(){
  this.cells[1].firstChild.data=prompt("Entrez un texte","ce que vous voulez")
 }
}
 
</script>

[Invité]

Parfait Avec sa plus besoin de ne définir aucun ID !

Merci beaucoup !

[javatwister]

J'ai un tableau avec une multitude de ligne

puis

J'ai un tableau de 20 lignes

ça fait un peu sourire;

et puis ton énoncé n'est pas assez précis pour qu'on te propose un truc simple et économe;

lâche-toi! tu fais quoi sur ta page?