When clicking on a table row, I am able to add the class active with JavaScript. However, when trying to click on a checkbox, an error occurs.
Check out the live Codepen link here
Below is the custom code snippet:
$('.dashboard-table-tbody tr').click(function() {
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).children('td').children('div').children('input').prop('checked', false);
}
else{
$(this).addClass('active');
$(this).children('td').children('div').children('input').prop('checked', true);
}
});.dashboard-table{
margin-bottom: 0;
font-size:13px;
line-height:15px;
color:#8b8e8c;
}
.dashboard-table th{
border:none;
padding:8px 12px;
font-weight:600;
}
.dashboard-table td{
padding:12px 12px 12px 12px;
vertical-align: middle;
}
.dashboard-table a{
font-weight:600;
}
.table-checkbox-col-head{
width:44px;
}
.table-checkbox{
padding: 0;
min-height: auto;
width: 16px;
height: 16px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
}
.table-checkbox .table-checkbox-label{
width: 16px;
height: 16px;
}
.table-checkbox .table-checkbox-label:before, .table-checkbox .table-checkbox-label:after{
top: 0;
left: 0;
margin-top: 0;
}
.dashboard-table tbody tr:hover {
background-color: #fafbfe;
}
.dashboard-table tbody tr.active {
background-color: #f8f9fc;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-sm dashboard-table">
<thead>
<tr>
<th scope="col" class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline2" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline2"></label>
</div>
</th>
<th scope="col" class="p-l-0">Name</th>
<th scope="col">Size</th>
<th scope="col">Upload at</th>
<th scope="col" class="text-right">Views</th>
</tr>
</thead>
<tbody class="dashboard-table-tbody">
<tr>
...
[/omitted for brevity]
...
</tr>
</tbody>
</table>