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/

突出显示按钮单击上的表格行

1 个答案: