Ayuda JSON !!

usuaria · #1 (**permalink**) 03/01/2008, 15:27

Recien estoy comenzando a trabajar con json asi que tengo unas dudas basicas, tengo el siguiente codigo:

window.onload=function() {

tablero.dibujar(5,2);
tablero.probando();
tablero.Activar();
//tablero.interfaz();
//tablero.setAttribute("style","bgcolor:red");
}

var tablero = {

"dibujar":function(filas,columnas) {
var tabla = document.createElement("table");
for (var i=0; i<filas; i++) {
var filas = document.createElement("tr");
tabla.appendChild(filas);
for (var j=0; j<columnas; j++) {
var columnas = document.createElement("td");
var text=document.createTextNode(i+"--"+j);
columnas.appendChild(text);
filas.appendChild(columnas);

}
}
tabla.appendChild(filas);
document.body.appendChild(tabla);
},

"Activar":function() {
alert("activar");
this.onmouseover=function() { this.setAttribute("bgcolor","red"); };
this.onmouseout=function() { this.removeAttribute("bgcolor"); };
this.onclick=function() { alert("ele")}
},

"interfaz": function() {
this.setAttribute("bgcolor","red");
},
"probando": function() {alert("hoa");}
};

mi duda es la siguiente que esta mal en las funciones "Activar" e "Interfza" que no logron que anden. ??? y como logro acceder a los elementos de la tabla??

gracias!

Panino5001 · #2 (**permalink**) 03/01/2008, 15:53

El nombre de las mismas (y de otras que se ven por allí) debe ir sin comillas ;)

usuaria · #3 (**permalink**) 04/01/2008, 20:51

probe eso de sacarle las comillas pero no me sirvio poniendo las comillas o sacandoselas a los nombres de ls funciones me las toma igual. lo q no me toma es el serAttribute...osea si yo quiero darle un color de fondo a la tabla con una funcion q este ahi dentro de ese objeto como hago?

derkenuke · #4 (**permalink**) 04/01/2008, 21:42

Hola usuaria:

Tendrás que darle un id único a cada tabla que creas, o si no tener una propiedad que se llame tablaDOM en objeto, que se encargue de referenciar a la tabla una vez escrita en el documento.

Con tablaDOM entonces si podrás hacer tablaDOM.onmouseover, y utilizar el this dentro de esa función (this será entonces tablaDOM). En tu script el this hace referencia al objeto javascript tablero, el cual es una variable sin más, y no tiene evento onmouseover...

Un saludo.

Panino5001 · #5 (**permalink**) 04/01/2008, 22:10

Se me anticipo derkenuke. this, en ese contexto, apunta al objeto tablero y no a la tabla. Además, para agregar los renglones y que funcione en todos los navegadores modernos, hay que crear un elemento tbody. Finalmente, para que lo tome Explorer, bgcolor debe definirse como bgColor (sintaxis camel case: con la c en mayúscula):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script>


var tablero = {

dibujar:function(filas,columnas) {
//alert(filas+'---'+columnas)
var tabla = document.createElement("table");
tabla.id='tablita'
cuerpo=document.createElement("tbody");
for (var i=0; i<filas; i++) {
var fila = document.createElement("tr");


for (var j=0; j<columnas; j++) {
    var columna = document.createElement("td");
    var text=document.createTextNode(i+"--"+j);
    columna.appendChild(text);
    fila.appendChild(columna);

}
cuerpo.appendChild(fila);
}

tabla.appendChild(cuerpo);
tabla.border='1';
document.body.appendChild(tabla);
},

Activar:function() {
alert("activar");
document.getElementById('tablita').onmouseover=function() { this.setAttribute("bgColor","red"); };
document.getElementById('tablita').onmouseout=function() { this.removeAttribute("bgColor"); };
document.getElementById('tablita').onclick=function() { alert("ele")}
},

interfaz: function() {
document.getElementById('tablita').setAttribute("bgColor","red");
},
probando: function() {alert("hoa");}
};
window.onload=function() {

tablero.dibujar(10,10);
tablero.Activar();
}
</script>
</head>

<body>
</body>
</html>

usuaria · #6 (**permalink**) 05/01/2008, 08:26

Muchas gracias!!! :) anda perfecto :) ....ahora otra consulta; si yo quiero acceder a un elemento de "tablita" como tendria que hacer; porq yo quiero tomar por ejemplo el dato que hay en la poscion tablita[3][2]; pero no me lo deja tomar asi como tengo que hacer??

grax!!! :)

JavierB · #7 (**permalink**) 05/01/2008, 08:38

Hola usuaria

Para acceder a las filas de la tabla, usa esto:

Código PHP:

  tab = document.getElementById('tablita');
filas = tab.getElementsByTagName('tr');
// la primera fila es filas[0], la segunda filas[1]...

Dentro de cada fila tienes que buscar las celdas:

Código PHP:

  // celdas de la primera fila
celdas = filas[0].getElementsByTagName('td');
txt = celdas[0].innerHTML; // contenido de la primera celda

Espero que te sirva. Saludos,

usuaria · #8 (**permalink**) 05/01/2008, 09:52

MUCHAS GRACIAS!!! :) seguramente proximamente aparezca con mas dudas! je..grax!

:)