選中表格行點擊

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/