JQuery class not being removed on data table on row click - html

Question

I have created a JS Fiddle for the issue I am having using JQuery with datatables: https://jsfiddle.net/f3xme87n/
I have a checkbox column which allows users to select maximum 5 items at once. The user can then select a primary row which can only ever be one row at a time (highlighted in yellow). Currently when you uncheck a selected box it highlights the row to yellow which is not what I want it to do.
To replicate the bug:
Hold Cntrl and click 5 checkbox items (the maximum you can select) these should highlight in a light blue colour.
Now Click on a name of one of selected, the row goes yellow which is expected
Now click on another name the row goes yellow and the previous row goes back to normal colour
Now uncheck one of the boxes from what you have selected (not the current yellow one) - Keep hold of Cntrl
Bug: the row remains yellow but unchecked. I need this to go back to normal table row colour so shouldn't have the primary class applied to that row.
I can seem to figure out how to remove the primary class when you uncheck the box! Hopefully JS Fiddle and above replication details help with my question.
Issue lies in this part of the code in the JS:
if (this.classList.contains('selected')) {
var prevSelectedItem = document.querySelector('tr.primary');
if (prevSelectedItem != null) {
prevSelectedItem.classList.remove('primary');
}
this.classList.add("primary");
}
I need to ensure in the Javascript - The user can only set the colour of a row to yellow if it has already been selected (i.e. blue) Otherwise rows should not be able to go to yellow at all.
Additional info:
The way the checkbox is checked is via css ::before and ::after. How can I retrieve the CSS to know whether the before and after is applied in my as that is how I can determine whether the checkbox is ticked or not:
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
content: '';
margin-top: -6px;
margin-left: -6px;
border: 1px solid black;
border-radius: 3px;
}
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
content: '\2714';
margin-top: -11px;
margin-left: -4px;
text-align: center;
text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

Answer 1

You can check if the tr clicked has class selected depending on this add class or remove same from tr.
Demo Code :
$(document).ready(function() {
var table = $('#tabledt').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: [0]
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
bSortClasses: false
});
table.on('select', function(e, dt, type, ix) {
var selected = dt.rows({
selected: true
});
if (selected.count() > 5) {
dt.rows(ix).deselect();
}
//remove class...
$("tbody tr:not(.selected)").removeClass("primary")
});
//on click of tr
$(document).on("click", "#tabledt tr", function() {
if ($(this).hasClass("selected")) {
//check if slectd class length is > 1
if ($("tbody").find(".selected").length > 1) {
$(this).removeClass("primary") //remove that primary class
$("tbody tr.selected").removeClass("primary")
} else {
//add class
$(this).addClass("primary") //add primary
}
} else {
$(this).removeClass("primary") //remove that primary class
}
//just other way to remove class
$("tbody tr:not(.selected)").removeClass("primary")
})
});
table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
cursor: pointer;
outline: none;
text-align: center;
}
.primary {
background-color: yellow !important;
}
.selected {
background-color: #acbad4;
}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<style>
table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
cursor: pointer;
outline: none;
text-align: center;
}
.primary {
background-color: yellow !important;
}
.selected {
background-color: #acbad4;
}
</style>
<table id="tabledt" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>$237,500</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Answer 2

table.on("deselect", function (e, dt, type, ix) {
dt.rows(ix).nodes().to$().removeClass("primary");
});
if (
!e.target.className.includes("select-checkbox") &&
this.classList.contains("selected")
) {
var prevSelectedItem = document.querySelector("tr.primary");
if (prevSelectedItem != null) {
prevSelectedItem.classList.remove("primary");
}
this.classList.add("primary");
}

Answer 3

You just need to inhibit click handler when it comes from that checkbox:
table.rows[i].onclick = function ({originalTarget:ot}) {
if($(ot).hasCElass("select-checkbox")) return;
/* ... */
};
Edit:
Answering your comment: If I understood your intention well, that jsfiddle works to me.
Maybe you're trying from an old browser not supporting destructuring.
Try this instead:
table.rows[i].onclick = function (ev) {
if($(ev.originalTarget).hasCElass("select-checkbox")) return;
/* ... */
};
orininalTarget is a property of passed-in event object that points to the actual DOM element that received the click (even if, like in your case, you were listening on an outer one that contains it).