Discussion :

[francky74]

Bonjour,

Je souhaite changer la couleur de fond d'un <tr> lorsque un bouton présent dans ce <TR> a été cliqué.

Donc, j'ai une boîte de dialogue qui contient un tableau avec plusieurs lignes. Il y a un bouton par ligne et lorsque l'on clique sur le bouton, je souhaite modifer la couleur de fond du tr où le bouton a été cliqué, et aussi changer ce bouton.

Pour l'instant, je n'arrive même pas à faire ce que j'ai décrit ci-dessus sur une ligne définie .... le code ci-dessous ne fonctionne pas ...

Pou les boutons, j'utilise les boutons présents sur ce site : http://fortawesome.github.io/Font-Awesome/cheatsheet/

Voici le code html illustrant la boîte de dialogue (je ne donne pas le code qui permet d'ouvrir cette boîte de dialogue, sauf si vous me dites que c'est important mais j'en doute ... donc seulement le code dans la dialogBox) :

Code html :

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
<div id="popup_MP">
    <table id='MP_add' cellspacing='0' cellpadding='3' border='1' borderColor='#ffffff' width='100%'>
        <thead>
            <tr class='TableTitle1'>
                <td>MP</td>
                <td colspan='2'>MP number</td>
            </tr>
        </thead>
        <tbody>
            <tr class='Normal'>
                <td width='45%'>test</td>
                <td width='45%'>test</td>
                <td width='10%'>
                    <a href='#' class='btn btn-success' href='' style='cursor: pointer;' onclick=''>
                        <i class='fa fa-lg' >&#xf067;</i>
                    </a>
                </td>
            </tr>
            <tr class='Normal'>
                <td width='45%'>test</td>
                <td width='45%'>test</td>
                <td width='10%'>
                    <a href='#' class='btn btn-success' href='' style='cursor: pointer;' onclick=''>
                        <i class='fa fa-lg' >&#xf067;</i>
                    </a>
                </td>
            </tr>
            <tr class='Normal'>
                <td width='45%'>test</td>
                <td width='45%'>test</td>
                <td width='10%'>
                    <a href='#' class='btn btn-success' href='' style='cursor: pointer;' onclick=''>
                        <i class='fa fa-lg' >&#xf067;</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

et le script associé :

Code :

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

1
2
3
4
5
6
7
8
9
$( "#popup_MP" ).dialog({
        autoOpen:false,
        modal: true
    });
 
    $('#MP_add').on('click', 'tbody .btn', function(e){
        var lignes = $('#popup_MP').getElementsByTagName("TR");
        lignes[1].style.backgroundColor = "red";
    });

Voilà, je galère là-dessus, si quelqu'un peut me donner quelques pistes ! merci beaucoup.

[francky74]

Bonsoir,

J'ai trouvé une solution comme cela :

Code :

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

1
2
3
4
$('#MP_add').on('click', 'tbody .btn', function(e){
        $this = $(this);
        $this.closest("tr").toggleClass("selected").style.backgroundColor = "red";
    });