ハイライトテーブル行このテーブルで

Question

をクリックして、目標は「保留中」または「達成」ボタンをクリックすると、選択したラジオで行をハイライトすることです。ハイライトの色は、クリックされたボタンに対応します。これまでは、行が選択されたときに行を強調表示する方法を学んだだけでした。

<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> 

私のCSSは、私は、これはあなたが達成しようとしていたものであればかなりわからないハイライト色

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

Answer 1

を組み込むことが、私が正しくあなたの質問を理解している場合、これはあなたを助ける必要があります。

次回は、コードがないため画像に含まれているボタンを追加することができます。これは簡単になり、手助けしようとしている人々の時間を節約します。

<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); 
     } 
    }); 
    }); 
}); 

追加jsFiddle https://jsfiddle.net/0nnxnxsq/1/