单击按钮突出显示表格行

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/