Que tal, ahora veremos cómo cambiar de color las celdas de
una tabla en html con jquery.
Para comenzar a trabajar con jquery tenemos que descargarnos
la librería de aquí: http://code.jquery.com/jquery-1.7.2.min.js
Una vez que tengamos la librería, la guardamos en una
carpeta común donde estará nuestra página html y nuestro archivo de javascript
(.js).
Comenzando con el código, crearemos la siguiente pagina web:
<html>
<head>
<title> pintando celdas en una tabla con jquery</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="selector.js"> </script>
</head>
<body>
<table id="tabla1" border="1">
<tr>
<td> Juan </td>
<td> Flor </td>
<td> Maria </td>
<td> Fernando </td>
</tr>
<tr>
<td> Carlos </td>
<td> Alfredo </td>
<td> Jose </td>
<td> Gaby </td>
</tr>
<tr>
<td> Alan </td>
<td> Nayeli </td>
<td> Nicolas </td>
<td> Jessica </td>
</tr>
</table>
</body>
</html>
una parte importante es cuando registramos un script, y en la parte del head de nuestra pagina tenemos los siguientes scripts registrados:
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="selector.js"> </script>uno es la libreria jquery y el otro es nuestro codigo de javascript donde esta el codigo de jquery para pintar de color las celdas.
el codigo del archivo js es el siguiente:
var x;
x=$(document)
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x= $("#tabla1 td");
x.click(cambiaColor);
}
function cambiaColor()
{
var x;
x=$(this);
x.css("background-color","ff00ff");
}
es necesario que se llame selector.js por que así fue definido en el script de la pagina html, si no no va a funcionar.
ahora solo basta ejecutar nuestra pagina web.
0 comentarios:
Publicar un comentario