Changer le style de bouton dynamiquement

**hammachat** · 07/04/2015, 13h54

Bonjour,

J'ai un tableau avec une colonne statut, dans cette colonne je dois mettre le statut dans un bouton et changer la couleur pour chaque état .

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
for (var i = 0; i < model.length; i++){
    var tr = $("<tr/>");
    var td = $("<td/>");
    if ($('#stateBtn').hasClass('btn btn-success disabled')) {
        $('#stateBtn').removeClass('btn btn-success disabled');
    }
    if ($('#stateBtn').hasClass('btn btn-warning disabled')) {
        $('#stateBtn').removeClass('btn btn-warning disabled');
    }
    if ($('#stateBtn').hasClass('btn btn-primary disabled')) {
        $('#stateBtn').removeClass('btn btn-primary disabled');
    }
    td.html("<button id='stateBtn'>" + model.State + "</button>");
    switch (model.state){
        case 0:
            $('#stateBtn').addClass('btn btn-warning disabled'); break;
        case 1:
            $('#stateBtn').addClass('btn btn-success disabled'); break;
        case 2:
            $('#stateBtn').addClass('btn btn-primary disabled'); break;
    }
   tr.append(td);
}

Merci

**headmax** · 08/04/2015, 09h43

Salut, juste un exemple parmi tant de manière de faire ...

Code css :

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
 
     .stateBtn{
         background-color: gainsboro;
     }
     .btn{
 
     } 
     .btn-success{
         background-color: greenyellow;
     }
     .btn-warning{
         background-color: crimson;
     } 
     .btn-primary{
         background-color: gainsboro;
     } 
     .disabled{
 
     }

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
 
<body>
        <table>
            <thead>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            </thead>
            <tbody>
                <tr>
                    <td><button class="stateBtn">A'</button></td><td><button class="stateBtn">B'</button></td><td><button class="stateBtn">C'</button></td>
                </tr>
            </tbody>
 
        </table>
 
    </body>

Code javascript :

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
 
//construire un tableau de retour sur ce format json ou adapter selon besion
var model = {
              State:[
                {class:'btn btn-success disabled',btname: 'Success'},
                {class:'btn btn-warning disabled',btname: 'Warning'},
                {class:'btn btn-primary disabled',btname: 'Primary'}
              ]
            };
 
var buttons = $("table tbody tr td button");
 
//on parcours les buttons par defaut de la page et on leur applique leur class et le text du nom du button
$(document).ready(function(){
    for (var i=0;i<buttons.length; i++){
        buttons[i].setAttribute('class', model['State'][i].class);
        buttons[i].textContent = model['State'][i].btname;
    }    
});

Exemple live
https://jsfiddle.net/watb9wey/

Bonne continuation.

Changer le style de bouton dynamiquement

jQuery

Vue hybride

Discussions similaires

Partager

Partager