bouton en javascript

Salut tout le monde je suis actuellement stagiaire dans une mairie, mon tuteur m'a récemment demandé de réaliser un formulaire de commande (pour que les employés municipaux puissent faire leurs demandes de cartouches d'encre), ces commandes seront récupérées dans un tableau.Jusque la rien de bien compliquer, seulement voila il souhaiterait qu'à la fin de chaque ligne de ce tableau se trouve un bouton pour qu'il puisse valider chaque commande qu'il a passer, donc après avoir réaliser les bouton je me suis atteler à bidouiller un script en JavaScript(je débute), le résultat me satisfait cependant lorsque je clique sur un des boutons, c'est toujours la première ligne qui est modifier.

En clair chaque fois qu'une nouvelle ligne apparait dans le tableau, le statut de la commande est "en attente" et lorsque mon tuteur appui sur le bouton il passe à "commandé" et donc mon prob est que si je clique sur le bouton de la 4ème ligne par exemple , c'est toujours la ligne 1 qui est modifier, j'espère avoir été assez clair dans ma description, je vous joint mon code source si quelqu'un à une piste pour moi

merci d'avance
Code:

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Tableau de commande</title> <link rel="stylesheet" media="screen" href="style_commande.css" /> </head> <body> <script type="text/javascript"> function validation(){ document.getElementById('bold').innerHTML = 'Commandée'; } function annulation(){ document.getElementById('bold').innerHTML = 'Annulée'; } </script> <table> <tr><td class="thead">Date</td><td class="thead">Service</td><td class="thead">Modèle Imprimante</td><td class="thead">Noir</td><td class="thead">Couleur</td><td class="thead">Cyan</td><td class="thead">Magenta</td><td class="thead">Jaune</td><td class="thead">Commentaire</td><td class="thead">Etat Commande</td></tr> <tr><td class="tbody">2010-06-21</td><td class="tbody"></td><td class="tbody"></td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody"></td><td class="tbody"><p><b id="bold">En Attente</b> </p> <input type="button" onclick="validation()" value="Valider"/><b id="bold"></b> <input type="button" onclick="annulation()" value="Annuler"</td></tr> <tr><td class="tbody">2010-06-17</td><td class="tbody">comptabilite</td><td class="tbody">hp</td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody">1</td><td class="tbody">1</td><td class="tbody">1</td><td class="tbody"></td><td class="tbody"><p><b id="bold">En Attente</b> </p> <input type="button" onclick="validation()" value="Valider"/><b id="bold"></b> <input type="button" onclick="annulation()" value="Annuler"</td></tr> <tr><td class="tbody">2010-06-17</td><td class="tbody">urbanisme</td><td class="tbody">canon</td><td class="tbody">1</td><td class="tbody">0</td><td class="tbody">1</td><td class="tbody">0</td><td class="tbody">0</td><td class="tbody"></td><td class="tbody"><p><b id="bold">En Attente</b> </p> <input type="button" onclick="validation()" value="Valider"/><b id="bold"></b> <input type="button" onclick="annulation()" value="Annuler"</td></tr> </table> </body> </html>

Bienvenue!

Bonjour,

Hé bien je vois que vous avez plusieurs fois l'id "bold" dans la page. Un id doit être unique. ;)
Or vous récupérez l'élément que vous voulez modifier par son id. Alors il s'y perd, forcément.

Effectivement j'avais pas fais attention, dans ce cas pensez vous que je peut utiliser getElementsByName()?

Non, dans ce cas je pense que vous devez garder getElementById et faire en sorte de n'avoir que des id uniques. Dans la fonction, vous passez comme paramètre l'id que vous voulez modifier.