Change color row Datatable selected when click on button Javascript

Question

I need to change the color of a row in my Datatable when I click on the button 'APPLY'

Here is my HTML code for the rows :

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

In my inspect tab I can change the background color of the row like this :

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

How can I code this in Javascript? I tried this code but I obtained an error :

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

The error :

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

zz is array-like, try zz[0].style.backgroundColor

Walk
– Walk

2020-03-09 17:36:32 +00:00
Commented Mar 9, 2020 at 17:36 — Walk
– Walk, Commented Mar 9, 2020 at 17:36

V.Volkov · Accepted Answer · 2020-03-09 17:45:43Z

2

As you use jQuery in the first line, Y not to continue using it like that:

$("#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">

answered Mar 9, 2020 at 17:45

V.Volkov

7393 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change color row Datatable selected when click on button Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related