1

Tengo este código para crear una tabla con grid pero quisiera saber como podría simplificar mi código con javascript para evitar mostrar todos los "divs" que se encuentran dentro del (los divs estan en la misma columna por si aparecen desacomodados)

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 50px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  width: 50px;
  height: 50px;
}
<div class="parte-tres">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>     
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>     
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

6
  • Podrías ser más claro en tu petición? el 16 jun. 2021 a las 2:00
  • como piensas simplificar HTML si este es la estructura de la página?, si omites algún elemento esto no se mostrará en la página
    – Christian
    el 16 jun. 2021 a las 2:17
  • lo que quiero es que en el html, dentro del <div class="grid-container"> solo se muestre un div y con javascript pudiera duplicarlo para formar la tabla el 16 jun. 2021 a las 2:21
  • puedes crear tus divs a partir de var div = document.createElement(div); y luego agregarlos a grid-container con appendChild() el 16 jun. 2021 a las 2:47
  • Coincido con @HernánGarcia el 16 jun. 2021 a las 3:48

1 respuesta 1

1

Definitivamente si puedes tener solamente la estructura base en tu documento HTML y crear todas las celdas (div's) al momento de cargar la página.

El ejemplo a continuación define un par de funciones.

  • crearDIV se encarga de crear cada DIV individual, colocándole el texto recibido dentro.
  • crearFila se encarga de crear el número de DIVs necesarios para una nueva fila, en este caso 5, valiéndose para ello de un ciclo for
  • Finalmente, hay código que se encarga de crear 10 filas.

Como decorador he puesto la dirección de cada celda dentro de cada una, pero esto no es necesario.

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 50px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  width: 50px;
  height: 50px;
}
<div class="parte-tres">
    <div id="contenedor" class="grid-container">
    </div>
</div>
<script>
let contenedor = document.getElementById('contenedor');

function crearDIV(txt) {
  let dv = document.createElement('DIV');
  contenedor.appendChild(dv);
  dv.innerHTML = txt;
}

function crearFila(nFila) {
  for(let i=0; i<5; ++i) {
    crearDIV(nFila + ',' + (i+1));
  }
}

for (let i=0; i<10; ++i) {
  crearFila(i+1);
}

</script>

Tampoco son estrictamente necesarias las funciones, podría lograrse todo con un par de ciclos anidados, pero prefiero estructurar el código de esta manera para hacerlo re-utilizable. A continuación un ejemplo que hace la tarea, sin colocar texto dentro.

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 50px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  width: 50px;
  height: 50px;
}
<div class="parte-tres">
    <div id="contenedor" class="grid-container">
    </div>
</div>
<script>
let contenedor = document.getElementById('contenedor');

for (let i=0; i<10; ++i) {
  for (let j=0; j<5; ++j) {
    contenedor.appendChild(document.createElement('DIV'));
  }
}
</script>

Tu Respuesta

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

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