One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked.
This is the approach I attempted:
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità</th>
<th>Quantità di alert</th>
<th>Stato</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<td><?php echo $row->aic; ?></td>
<td><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td> <input type="checkbox" name="radiog_lite" id="<?php echo $row->aic; ?>" class="css-checkbox" />
<label for="<?php echo $row->aic; ?>" class="css-label"></label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
Here's the jQuery code snippet I tried:
jQuery(document).ready(function() {
jQuery('input').click(function() {
jQuery(this).parents("tr").css('background-color', 'yellow');
});
});
The issue I encountered is that this code only colors the rows with odd indices, even though inspecting elements in the browser shows background-color: yellow added to all rows. I suspect the problem lies with Bootstrap dataTable integration. Any assistance would be greatly appreciated. Thank you!