Pintar un tablero de ajedrez con jQuery

Pintar un tablero de ajedrez con jQuery

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>
Tablero de ajedrez
Tablero de ajedrez dibujado con jQuery

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.