Good afternoon,
I would like to know how to change the background color of a TD by clicking on the radiobox contained in it and exiting another radiobox from another TD back to the original background color
I'm trying with the following code in Jquery below:
$(document).on('click', '.td_data_consulta', function() {
if ($(this).is(':checked')) {
$(this).parent().css('background', '#90EE90');
$(this).parent().parent().find('.hr_consulta').css('background', '#90EE90');
} else {
$(this).parent().css('background', 'white');
$(this).parent().parent().find('.hr_consulta').css('background', 'white');
}
});
<table class='table table-responsive table-hover table-condensed' id='table_horarios_consultas'>
<thead>
<tr>
<th></th>
<th>Data</th>
<th>Hora</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='radio' class='td_data_consulta' name='marc_data_consulta' id='' value=''> </td>
<td name=dt_consulta class='dt_consulta' id=''></td>
<td name=hr_consulta class='hr_consulta' id=''></td>
</tr>
</tbody>
</table>
But it only changes color when I click the first time, when I click on another RadioBox of another TD the color does not return to the previous one, it remains in the color that was changed when clicking.
Does anyone know how to solve this?
Thank you in advance.
[RESOLVED]
I was able to resolve it as follows:
// Ao clicar em um input do type="radio" de class = td_data_consulta
$(document).on('click', '.td_data_consulta', function() {
// Agora vamos passar por todos elementos tr de class = tr_marca_consulta, definindo um bg padrão (branco)
$('.tr_marca_consulta').each(function() {
$(this).css('background-color','white');
});
// E agora definimos o elemento atual (mais proximo do radio) com o background #9AFF9A
$(this).closest('.tr_marca_consulta').css('background-color','#9AFF9A');
});