Accès à un élément du tableau en Jquery

Version imprimable

Bonjour,

sur chaque ligne d'un tableau HTML, il y a un bouton qui sur un click doit modifier le contenu d'une des cellules de la ligne.
Mon tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
       <table class="listeLegere">
            <caption>Descriptif des éléments hors forfait</caption>
            <tr>
                <th class="date">Date</th>
                <th class="libelle">Libellé</th>
                <th class="montant">Montant</th>
                <th></th>
            </tr>
                            <tr>
                    <td>17/09/2015</td>
                    <td id="libelleFiche">repas avec praticien</td>
                    <td><input size="15" value="41.00"></td>
                    <td><input class="btnRefuse" type="button" value="Refuser"></td>
                </tr>
                                <tr>
                    <td>23/09/2015</td>
                    <td id="libelleFiche">location équipement vidéo/sonore</td>
                    <td><input size="15" value="380.00"></td>
                    <td><input class="btnRefuse" type="button" value="Refuser"></td>
                </tr>
                        </table>

par exemple si je clique sue le bouton Refuser, je dois modifier le libellé "repas avec praticien" en Refusé : repas avec praticien

Merci pour vos réponse.

Bonjour Kinnie et bienvenue sur le forum.

Première remarque : tu as deux <td> avec le même id : ce qui est une erreur de conception !
Sinon une solution en Jquery à ton problème :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table class="listeLegere">
<caption>Descriptif des éléments hors forfait</caption>
<tr>
<th class="date">Date</th>
<th class="libelle">Libellé</th>
<th class="montant">Montant</th>
<th></th>
</tr>
<tr id="libelleRow1">
<td>17/09/2015</td>
<td id="libelleFiche1">repas avec praticien</td>
<td><input size="15" value="41.00"></td>
<td><input class="btnRefuse" type="button" value="Refuser"></td>
</tr>
<tr>
<td>23/09/2015</td>
<td id="libelleFiche2">location équipement vidéo/sonore</td>
<td><input size="15" value="380.00"></td>
<td><input class="btnRefuse" type="button" value="Refuser"></td>
</tr>
</table>

Jquery :

Code:

1
2
3
4
var libelleFiche1 = document.getElementById("libelleFiche1");
$("#libelleRow1 .btnRefuse").click(function(){
libelleFiche1.innerHTML="Refusé : repas avec praticien";
});

30/11/2015, 16h49
Kinnie

Merci pour ta réponse Jacques Beauregard, problème résolu :D
30/11/2015, 16h58
SpaceFrog

Code:

libelleFiche1.innerHTML="Refusé : repas avec praticien";

heu Jquery ...

Code:

$('#libelleFiche1').html("Refusé : repas avec praticien");
30/11/2015, 17h19
Jacques Beauregard

Citation:

Envoyé par SpaceFrog

heu Jquery ...

Code:

$('#libelleFiche1').html("Refusé : repas avec praticien");

Oui certes.

Code:

$("#libelleRow1 .btnRefuse").click(function(){

Non jQuery?
30/11/2015, 19h52
NoSmoking

Bonjour,

Citation:

Non jQuery?

si mais ce que veux dire la grenouille c'est qu'il est préférable d'utiliser jQuery pour garder de la cohérence dans le codage. (enfin je crois !)
01/12/2015, 08h35
SpaceFrog

Oui, tout à fait, pourquoi utiliser jquery à moitié, autant être cohérent dans son code ...

Code:

$("#libelleRow1 .btnRefuse").on("click",function(){