Pintar un tablero de ajedrez con jQuery

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Pintar un tablero de ajedrez con jQuery 1

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>

Pintar un tablero de ajedrez con jQuery 2

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 0 / 5. Votos: 0

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *