0

El enunciado es el siguiente:

  • Un div con id animales que funcionará como contenedor de los animales de la página.

  • Una serie de divs con clase animal que se generarán dinámicamente y se añadirán al contenedor. Cada div tendrá clase animal (lo que le da las características CSS comunes a todos los animales), el id correspondiente al animal que estamos generando (lo que permitirá acceder a él de manera individualizada) y la imagen de fondo con el nombre del animal.

Como la imagen es una imagen 2x2, con una forma de cuadrado, con 2 columnas y 2 filas, he creado una tabla mediante DOM con un div contenedor llamado .

Ahora el problema es el siguiente, ¿cómo asigno a cada celda de la tabla el div con la clase = animal, y el id correspondiente al animal (vaca, cerdo, perro, gato; uno por cada celda).

/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.onload = crearTabla;

/*Array donde estan definidos los nombres de los animales.*/
var animales = ["cerdo", "vaca", "gato", "perro"];

/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
	//Obtener la referencia del elemento body.
	var body = document.getElementsByTagName("body")[0];
	
	//Creamos el elemento/objeto que deseamos: <div>.
	var div = document.createElement("div");
	//Asignamos un id al div creado.
	div.setAttribute("id", "animales");
	//Agregamos al body el div.
	body.appendChild(div);
		
	//Crea un elemento <table> y un elemento <tbody>.
	var tabla = document.createElement("table");
	var tblBody = document.createElement("tbody");
 
	//Crea las celdas.
	for (var i=0; i<2; i++) {
		//Crea las hileras de la tabla.
		var hilera = document.createElement("tr");
		for (var j=0; j<2; j++) {
			var celda = document.createElement("td");
			var textoCelda = document.createTextNode("Hilera "+i+", Columna "+j);
			celda.appendChild(textoCelda);
			hilera.appendChild(celda);
		}
		//Agrega la hilera al final de la tabla (al final del elemento tblbody).
		tblBody.appendChild(hilera);
	}
 
	//Posiciona el <tbody> debajo del elemento <table>.
	tabla.appendChild(tblBody);
	//appends <table> into <body>.
	div.appendChild(tabla);
	//Modifica el atributo "border" de la tabla y lo fija a "2";
	tabla.setAttribute("border", "2");
}
html{
	height:100%;
}

body{
	background-color:#FFE0B2;
	margin:0px;
	height: 100%;
}


#animales{
	width:500px;
	margin:0 auto;
	background-color:#FF9900;
	border-left:2px solid black;
	border-right:2px solid black;
}

#animales:after {
    content: "";
    clear: both;
    display: block;
}

.animal{
	width:200px;
	height:200px;
	margin:25px;
	float:left;
	background-size: contain;

}

.rota{
	 transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);	
	
	 transition: transform 4s;
	-webkit-transition: -webkit-transform 4s;
	-moz-transition: -moz-transform 4s; 	
}

@keyframes gran
{
	0%{}
	50%{	transform: scale(2,2);}	
	100%{	transform: scale(1,1);}
}

@-webkit-keyframes gran{
	0%{}
	50%{	-webkit-transform: scale(2,2);}
	100%{	-webkit-transform: scale(1,1);}	
}

@-o-keyframes gran{
	0%{}
	50%{	-o-transform: scale(2,2);}
	100%{	-o-transform: scale(1,1);}	
}


.grande{
	animation: gran 4s ease-out;
	-webkit-animation: gran 4s ease-out;
	-moz-animation: gran 4s ease-out;
	-o-animation: gran 4s ease-out;
}





@keyframes peque
{
	0%{}
	50%{	transform: scale(0.5,0.5);}	
	100%{	transform: scale(1,1);}
}

@-webkit-keyframes peque{
	0%{}
	50%{	-webkit-transform: scale(0.5,0.5);}
	100%{	-webkit-transform: scale(1,1);}	
}

@-o-keyframes peque{
	0%{}
	50%{	-o-transform: scale(0.5,0.5);}
	100%{	-o-transform: scale(1,1);}	
}


.pequenio{
	animation: peque 4s ease-out;
	-webkit-animation: peque 4s ease-out;
	-moz-animation: peque 4s ease-out;
	-o-animation: peque 4s ease-out;
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Animales!</title>
		<link rel="stylesheet" href="style/estilo.css"/>
		<script type="text/JavaScript" src="js/animales.js"></script>
	</head>

	<body>

	</body>
</html>

He insertado los nombres "Hilera 0, Columna 0"... para haber pruebas, pero tendrían que ir las imágenes de las fotos en esas celdas/divs.

2
  • w3schools.com/jsref/met_node_appendchild.asp aquí tienes algo que te ayudará
    – G3l0
    Commented el 31 may. 2017 a las 8:48
  • Si entendí bien lo que quieres, puedes entonces recorrer los td de la tabla con un foreach y agregarle los div a cada celda con la funcion .append() o .html() de JQuery, es la forma mas facil que se me ocurre Commented el 31 may. 2017 a las 17:06

1 respuesta 1

1

Puedes conformar un array bidimensional con los animales en los cuales las posiciones coincidan con cómo quieres que aparezcan en la tabla:

array_animales[0][0] = "vaca";
array_animales[0][1] = "gato";
array_animales[1][0] = "perro";
array_animales[1][1] = "mono";

Y haces los llamas por posición en base a los valores de i y j con los que construyes tu tabla, tras crear el elemento td le añades el atributo de clase coincidente con la posición en el array.

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.