ligne de table en surbrillance sur le bouton cliquez sur

Question

Dans ce tableau, l'objectif est de mettre en évidence la ligne à la radio sélectionnée lorsque le bouton « En attente » ou « Accompli » est cliqué. La couleur de surbrillance correspondrait au bouton cliqué. Jusqu'à présent, j'ai seulement appris à mettre en évidence la ligne lorsque la ligne est sélectionnée.

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" width="100%"> 
           <thead> 
           <tr> 
            <th></th> 
            <th>#</th> 
            <th>Complex</th> 
            <th>Unit#</th> 
            <th>Date Requested</th> 
           </tr> 
           </thead> 
           <tbody> 
           <tr> 
            <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th> 
            <td></td> 
            <td></td> 
            <td></td> 
            <td></td> 
           </tr> 
           </tbody> 
           </table> 

Mon CSS pour incorporer les couleurs de surlignage

.highlight_row_pending { 
     background-color: #DCAC61; 
    } 
.highlight_row_accomp { 
     background-color: #67A8DA; 
    } 

Answer 1

Je ne suis pas sûr que ce soit ce que vous essayez d'atteindre, mais si je comprends bien votre question, cela devrait vous aider.

Aussi la prochaine fois que vous voudrez ajouter les boutons qui sont inclus dans votre image puisque nous n'avons pas le code que vous avez, ce sera plus facile et gagner du temps pour les personnes qui essaient de vous aider.

<button data-value="highlight_row_pending">Pending</button> 
<button data-value="highlight_row_accomp">Accomplished</button> 

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" border="1" width="100%"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>#</th> 
     <th>Complex</th> 
     <th>Unit#</th> 
     <th>Date Requested</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
    </tr> 
     <tr> 
     <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
    </tr> 
     <tr> 
     <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
    </tr> 
     <tr> 
     <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
     <td align="center">Information</td> 
    </tr> 
    </tbody> 
</table> 

jQuery

$("button").each(function(){ 
    $(this).click(function(){ 
    var button_value = $(this).data("value"); 
    $("tr").each(function(){ 
     if($(this).find("input[type='radio']").is(':checked')){ 
     $(this).children("td").removeClass().addClass(button_value); 
     } 
    }); 
    }); 
}); 

Ajouté jsFiddle https://jsfiddle.net/0nnxnxsq/1/