Pintar un tablero de ajedrez con jQuery puede parecer fácil a priori pero como mínimo a mi no me lo parece.
Se me ha atragantado el problema y a pesar de que al final lo he resuelto me ha obligado a aplicar varias estrategias.
En este ejercicio encontrarás dos posibles soluciones y es probable que hay muchas otras.
Hay varios conceptos mínimos que debes dominar.
- Como seleccionar mediante jQuery los nodos pares y los impares de un determinado tipo.
- Como modificar el css de un nodo.
- En caso de necesidad pasar de escribir de jQuery a Javascript puro.
Pasemos al enunciado del ejercicio.
Vamos a repasarlo mediante un ejercicio.
Enunciado
Genera mediante la combinación de html, css y jquery un tablero de ajedrez según la imagen adjunta.
Puedes usar los siguientes estilos y html.
<!-- Introduce en el head -->
<style>
table{border-collapse:collapse;}
td{
width:60px;
height:60px;
border:1px solid #000
}
</style>
<!-- Introduce en el body -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- este código debes tenerlo 8 veces -->
</table>
Solución basada única y exclusivamente en jQuery
$("tr:even>td:odd").css("background-color","red");
$("tr:odd>td:even").css("background-color","red");
La solución es muy simple cuando ves la respuesta.
Sin embargo te aseguro que personalmente me ha costado bastante dar con el selector css adecuado.
La idea se basa en pintar en las filas impares las celdas pares. Y en las filas pares las celdas impares.
Solución basada en la mezcla de jQuery y Javascript
var celdasFilasImpares = $("tr:odd").children();
var celdasFilasPares = $("tr:even").children();
for(var i = 0; i<celdasFilasImpares.length-1;i=i+2){
celdasFilasImpares[i].style.backgroundColor="#000";
}
for(i = 1; i<celdasFilasPares.length;i=i+2){
celdasFilasPares[i].style.backgroundColor="#000";
}
Aunque parezca mentira para mi es más intuitiva esta solución que la anterior a pesar de escribir mucho más código.
La idea es que la función jQuery devuelve una lista de nodos para la que puedo acceder a cualquiera mediante [i]
En el momento que accedemos a un nodo en concreto ya no podemos usar los métodos de jQuery sino que debemos pasar a usar los de Javascript.
Para los for fijaros que un empieza en i=0; y que el otro empieza en i=1; De este modo se consigue un desfase que consigue pintar una si una no.
Observar además que el paso de cada iteración no es el típico i++ sino que es i=i+2 para conseguir que siempre quede una celda intermedia pintada de blanco.¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta