0

asi tengo la tabla , obviamnate con 2 TR adicionales mas con las clases correspondiente

  1. codigo tabla

         <table class="table1">
    <tr>
      <th>Color</th>
      <th>Forma</th>
    </tr>
    <tr>
      <td>
        <input type="radio" name="color" onclick="cambiarRojo()" id="rojo" />Rojo
      </td>
      <td>
        <input type="radio" name="figura" onclick="figura_cruz();" />Cruz
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="color" onclick="cambiarAmarillo()" id="amarillo" />Amarillo
      </td>
      <td>
        <input type="radio" name="figura" onclick="figura_cuadrado();" />Cuadrado
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="color" onclick="cambiarVerde()" id="verde" />Verde
      </td>
      <td>
        <input type="radio" name="figura" onclick="figura_triangulo();" />Triangulo
      </td>
    </tr>
    
                                                     
  2. js

este código estoy usando , lo que quiero es que al seleccionar la figura, que los cuadros de las clases seleccionada desaparezcan , lo realiza pero no los cuadros que quiero

 let clases = ['cuadrob', 'cuadroc', 'cuadrod',

    'cuadrof','cuadroh','cuadroj','cuadrok','cuadrol','cuadron','cuadroo',
    'cuadrop','cuadror','cuadrot','cuadrov','cuadrow', 'cuadrox'];

  function figura_cruz(){
   for(let clasesCruz of clases){
    var cruz = document.getElementsByClassName(clasesCruz);   
    for(var i=0; i<cruz.length; i++){
    if(cruz[i].style.visibility = "hidden"){
        cruz[i].style.display = "block";
    }else{
        cruz[i].style.visibility = "hidden";
      }
    }
   } 


    }
  1. js cambio color esta es una de la function que realize para el cambio de color rojo, amarillo y verde

     function cambiarRojo() {
    var Filas = document.getElementsByClassName("clase");
    [].forEach.call(Filas, function (rojo) {
    rojo.style.backgroundColor = "red";
    });
    }
    
2
  • pon el código , no imágenes
    – RoyalUp
    el 6 nov. 2020 a las 9:27
  • ya pude subir el codigo el 6 nov. 2020 a las 17:26

1 respuesta 1

1

Hay algunos problemas en el codigo que hacen que no resulte: en la comparacion del if se usa == en vez de = (de otro modo siempre sera evaluado true). Ademas, solo basta usar style.visibility para mostrar /ocultar la celda. Si lo haces con display:none la celda desaparecera y otro elemento ocupara su lugar (equivale a que la celda no esté)

 let clases = ['cuadrob', 'cuadroc', 'cuadrod',

    'cuadrof','cuadroh','cuadroj','cuadrok','cuadrol','cuadron','cuadroo',
    'cuadrop','cuadror','cuadrot','cuadrov','cuadrow', 'cuadrox'];

  function figura_cruz(){
   for(let clasesCruz of clases){
    var cruz = document.getElementsByClassName(clasesCruz);   
    for(var i=0; i<cruz.length; i++){
    if(cruz[i].style.visibility == "hidden"){
        cruz[i].style.visibility = "";
    }else{
        cruz[i].style.visibility = "hidden";
      }
    }
   } 

}

figura_cruz();
td{
padding: 10px;
}
<table border="1">
<tr>
      <td class="clase  cuadroa" ></td>
      <td class="clase  cuadrob"></td>
      <td class="clase  cuadroc"></td>
      <td class="clase  cuadrod"></td>
      <td class="clase  cuadroe"></td>
    </tr>
    <tr>
      <td class="clase  cuadrof"></td>
      <td class="clase  cuadrog"></td>
      <td class="clase  cuadroh"></td>
      <td class="clase  cuadroi"></td>
      <td class="clase  cuadroj"></td>
    </tr>
    <tr>
      <td class="clase  cuadrok"></td>
      <td class="clase  cuadrol"></td>
      <td class="clase  cuadrom"></td>
      <td class="clase  cuadron"></td>
      <td class="clase  cuadroo"></td>
    </tr>

</table>

1
  • muchas gracias por la aclaración , ya voy comprendiendo un poco mas la lógica , soy nuevo llevo poco estudiando ,muy agradecido por tomar parte de tu tiempo , saludos el 6 nov. 2020 a las 17:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.