Simulador (Cuando presiona el botón "ejecutar el programa"
se graban todos los cuadros de texto y se ejecuta el primero de la lista
mostrando en una página el resultado)
Problema:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<input type="button" id="boton1" value="Asociar clase">
<input type="button" id="boton2" value="Desasociar clase">
<table>
<caption>
cantidad de lluvia caida en mm.
</caption>
<thead>
<tr>
<th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th>
</tr>
</thead>
<tbody>
<tr>
<th>Córdoba</th>
<td>210</td><td>170</td><td>120</td>
</tr>
<tr>
<th>Buenos Aires</th>
<td>250</td><td>190</td><td>140</td>
</tr>
<tr>
<th>Santa Fe</th>
<td>175</td><td>140</td><td>120</td>
</tr>
</tbody>
</table>
</body>
</html>
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(asociarClase);
x=$("#boton2");
x.click(desasociarClase);
}
function asociarClase()
{
var x=$("th");
x.addClass("titulo");
var x=$("td");
x.addClass("cuerpo");
}
function desasociarClase()
{
var x=$("th");
x.removeClass("titulo");
var x=$("td");
x.removeClass("cuerpo");
}.titulo
{
font-family:arial;
font-weight: normal;
background-color: #6495ed;
color:#ff0;
}
.cuerpo {
border: 1px solid #000;
padding: .5em;
background-color:#ed8f63;
width:100px;
text-align:center;
}