单击按钮时突出显示表格行答案

【问题标题】：Highlight table row on button click单击按钮时突出显示表格行
【发布时间】：2017-09-21 14:32:04
【问题描述】：

在此表中，目标是在单击“待处理”或“已完成”按钮时突出显示所选单选上的行。突出显示颜色将对应于单击的按钮。到目前为止，我只学习了如何在选择行时突出显示该行。

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

【问题讨论】：

高亮选中行的代码在哪里？

标签： javascript css html-table highlight

【解决方案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/

【讨论】：

谢谢，这正是我想要的。