选中表格行点击

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/