I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked.
Here is the HTML code snippet 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 the inspect tab, I can manually change the background color of a selected row like this:
table.dataTable tbody tr.selected {
background-color: orange;
}
I attempted writing JavaScript to achieve this functionality, but encountered an error. Here's the snippet of the code:
$("#btnApply").click(function() {
var selectedRows = document.getElementsByClassName("selected");
selectedRows.forEach(row => {
row.style.backgroundColor = "orange";
});
});
The error message I received was:
Uncaught TypeError: Cannot set property 'backgroundColor' of undefined