javascript - 单击按钮 Javascript 时更改选择的颜色行数据表

Question

当我单击“应用”按钮时，我需要更改数据表中行的颜色

这是我的行 HTML 代码:

<tr role="row" class="odd"></tr>
<tr role="row" class="even selected"></tr>
<tr role="row" class="odd"></tr>
<tr role="row" class="even"></tr>

在我的检查选项卡中，我可以像这样更改行的背景颜色:

table.dataTable tbody tr.selected {
    background-color: orange;
}

如何用 JavaScript 编写此代码？我尝试了这段代码，但出现错误:

$("#btnApply").click(function() {
        var zz = document.getElementsByClassName("selected");
        zz.style.backgroundColor = "orange";
     });

错误:

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

Answer 1

当你在第一行使用 jQuery 时，Y 不要继续这样使用它:

$("#btnApply").click(function() {
  $(".selected").css('background-color', 'green');
});

table tr.selected {
    background-color: orange;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<tr role="row" class="odd"><td>aa</td></tr>
<tr role="row" class="even selected"><td>aa</td></tr>
<tr role="row" class="odd"><td>aa</td></tr>
<tr role="row" class="even"><td>aa</td></tr>
</table>
<input type="button" id="btnApply" value="click">