There should only be one row with the class highlightRowSelected
and its checkbox must be checked - this functionality is in place.
How can I deselect other checkboxes that do not have the class highlightRowSelected
, while allowing other rows to have their checkboxes ticked without adding the class highlightRowSelected
? The class should only be added to a row when clicked (not from the checkbox column).
You can update the function declaration and use pure JS instead of specifying getdetails(row) in the HTML. Additionally, as the rows are dynamic, IDs or similar cannot be hardcoded in the HTML.
For reference, please see this fiddle: https://jsfiddle.net/y7jqb5hp/13/
function selectRow(row) {
el = window.event.srcElement;
if (el.id.substr(0, 7) == 'eachRow')
el = null;
if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
} else if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
}
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr onclick="selectRow(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="selectRow(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="selectRow(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="selectRow(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>