Javascript: Color filas pares e incluso las células de una tabla creada dentro de una función

votos
0

teniendo un poco de un problema con mi función de JS en el momento.

En esencia, el objetivo del juego aquí es conseguir la configuración del código de tal manera que sólo en las filas pares y células incluso, será de color amarillo los círculos de la tabla, mientras que el resto permanece verde.

Tengo que muestra como este en el momento:

¿Cómo se muestra en la vista previa del archivo HTML

Los cuadrados rojos alrededor de los círculos indican las filas pares / impares células que necesitan ser coloreadas en amarillo en vez de verde.

Aquí está mi código:

    <!DOCTYPE html>
<html lang=en dir=ltr>
  <head>
    <style>
      body {
        background-color: linen;
      }
      td {
        height: 75px;
        width: 75px;
        background-color: green;
        border-radius: 50%;
        display: inline-block;
      }

    </style>
    <meta charset=utf-8>
    <title></title>
    <script type=text/javascript>

      function validation(){
        var userSubmit = document.getElementById('size').value; //takes the users input and stores it within the variable userSubmit.
        var num_rows = userSubmit; //assigning the users input to the number of rows.
        var num_cols = userSubmit; //assigning the users input to the number of colums.
        var tableBody = ; //empty string setup for the table.

        for (var r=0; r<num_rows; r++){
          tableBody += <tr>; //for loop going through the number of rows required to complete the table.
            for (var c=0; c<num_cols; c++){
              tableBody += <td> + c + </td>;//for loop, within the rows for loop, this is to determine the number of columns required in the table
            }
            tableBody += </tr>;
        }
        document.getElementById('wrapper').innerHTML = (<table> + tableBody + </table>);
      }

    </script>
  </head>
  <body>
    <form name=form1>
      <select id=size>
      <option value=3>3x3</option>
      <option value=5>5x5</option>
      <option value=7>7x7</option>
      </select>
    </form>
    <button type=submit onclick=validation()>Generate Graph</button>

    <div id=wrapper></div>
  </body>
</html>

Mi función es la creación de la tabla de la red el usuario selecciona, pero estoy seguro de cómo abordar el JS requiere para colorear las celdas necesarias como se mencionó anteriormente.

Cualquier consejo sería apreciado, o déjame por favor saber si no he sido lo suficientemente claro!

Publicado el 13/01/2020 a las 21:53
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

El uso de selectores CSS anidadas se puede colorear las células que se encuentran tanto en las filas pares y columnas pares.

tr:nth-child(even) td:nth-child(even) {
  background-color: red;
}

La regla CSS anterior coincide con todos los elementos que son td un niño, incluso de su tr padres que a su vez es un niño, incluso de su tabla padre.

Respondida el 13/01/2020 a las 22:05
fuente por usuario

votos
0

Aquí es cómo se ve cuando se utiliza td: nth-child (incluso)

td: nth-child (incluso)

Aquí es cómo se ve cuando se utiliza tr: nth-child (incluso)

tr: nth-child (incluso)

Aquí es cómo se ve usando un selector CSS anidada

tr: nth-child (incluso), td: nth-child (incluso)

Como podemos ver en la última imagen, los círculos resaltados en un cuadro negro son los únicos círculos que debe ser de color rojo (o amarillo). Pero se pone un poco cobarde que mira con el selector CSS anidada.

Respondida el 13/01/2020 a las 22:08
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more