单击按钮时突出显示 table 行

Question

在此 table 中，目标是在单击 "Pending" 或 "Accomplished" 按钮时突出显示所选单选按钮上的行。突出显示颜色将对应于单击的按钮。到目前为止，我只学会了如何在选中该行时突出显示该行。

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

单击按钮时突出显示 table 行

Highlight table row on button click

javascript

css

html-table

highlight