Change TD background color when clicking RadioBox Checked and change Color again on Exit RadioBox

Navigation
0

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');
});
    
asked by anonymous 07.08.2017 / 22:11

2 answers

0

HTML code 

<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>
    
08.08.2017 / 02:36
1

Ideally you should do this with class: D

In CSS add: 

.hr_consulta,
.hr_consulta .td_data_consulta { background: #FFFFFF; }
.hr_consulta.selecionado,
.hr_consulta.selecionado .td_data_consulta { background: #90EE90; }

In Javascript, replace: 

$(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');
    }
});

By 

$(document).on('click', '.td_data_consulta', function() {
    $('.selecionado').removeClass('selecionado');
    if ($(this).is(':checked') ){
        $(this).closest('.hr_consulta').addClass('selecionado');
    }
});

Give me feedback if it works blz

    
07.08.2017 / 22:41
Entering bulk data | SPServices | Sharepoint What does ns3 and ns4 mean in an XML file?