Selecting previous CSS element

Asked

Viewed 917 times

1

I’m trying to select the other parent element of a table, but this not rolling track CSS.

HTML

<table>
<tr>
   <td>
    <div>
        <input type="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibe-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
</table>

CSS

.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}
input[type="radio"]:checked + .exibir-detalhes {
    display: block;
}
html css table

  • With CSS you can only select siblings, children or adjacent. You would have to use Javascript for this.

  • Thank you, with jquery with you?

  • He could not use classes together with ntn-Child(2) ?

2 answers

0


Only with CSS is it not possible to do this.

With Jquery would look like this:

Note: The name of your class exibir-detalhes was under a different name in your html and css, so I left both with the same name.

$(document).ready(function() {
  $('.voo-radio').on('change', function() {
    $('.exibir-detalhes').hide();
    
    $($(this).parents('tr').next().find('.exibir-detalhes')).show();
  });
});
.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> 
  <tr> 
    <td> 
      <input type="radio" class="voo-radio" name="voo-radio">
    </td> 
  </tr> 

  <tr> 
    <td> 
      <div class="exibir-detalhes"> aqui vem um teste 1 </div>
    </td> 
  </tr> 
  
  <tr>  
    <td> 
        <input type="radio" class="voo-radio" name="voo-radio"> 
    </td>
  </tr> 
  
  <tr> 
      <td> 
          <div class="exibir-detalhes"> aqui vem um teste 2 </div> 
      </td> 
  </tr>
</table>

  • I was able to get this result, but there are several lines with input and each one of them will have the TR related to it, as it could make that activates only the TR related to the radio input?

  • I changed my answer. Take a look to see if this is what you want.

  • It would be in this style, only with much more results <table> <tr> <td> <input type="radio" class="radio-flight" name="radio-flight"> </td> </tr> <tr> <td> <div class="display-details"> here comes a test 1 </div> </td> </tr> <tr> <td> <input type="radio" class="flight-radio" name="flight-radio"> </td> </tr> <tr> <td> <div class="display-details"> here comes a test 2 </div> </td> </tr>

  • I modified the code according to this structure.

0

There was an error in your class: in CSS you are exibir-detalhes and in the element exibe-detalhes.

With jQuery you can do this way by looking for the element of tr after the radio clicked:

$(".voo-radio").click(function(){

   $(".exibir-detalhes")
   .hide();
   
   $(this)
   .closest("tr")
   .next("tr")
   .find(".exibir-detalhes")
   .show();
});
.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
   <td>
    <div>
        <input type="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibir-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
<tr>
   <td>
    <div>
        <input type="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibir-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
</table>

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.