Como saber el nodo seleccionado

epplestun · #1 (**permalink**) 18/01/2005, 09:53

Buenas, tal vez el titulo no sea el mas adecuado, pero nose como explicarlo, la idea es seleccionar un nod, por ejemplo un nodo creado mediante:

Código:

node = document.createElement("table");

Por ejemplo si quiero trabajar con ese nodo, como podria seleccionarlo? es decir si tengo el cursor dentro de una celda de esa tabla, como se a que nodo se refiere?

tunait · #2 (**permalink**) 18/01/2005, 09:56

Cita:

es decir si tengo el cursor dentro de una celda de esa tabla

Qué tal epplestun,

el cursor nunca queda dentro de una celda

en todo caso puedes asignarle un onclick que te devuelva el elemento que és

epplestun · #3 (**permalink**) 18/01/2005, 10:15

hola tunait!

jeje pues eso jeje haciendo un onclick que me lo devuelva pero jeje de otdas formas si que se puede quedar dentro deuna celda ;) si la celda es editable jeje como el resto de la pagina jajaja

Serias tan amable de decirme como hacerlo con el onclick?¿

tunait · #4 (**permalink**) 18/01/2005, 10:21

...pero las celdas no son editables ... en todo caso puedes meter un campo de formulario pero la celda en sí no es editable.

Bueno, a lo práctico que es a lo que vamos....

no sé qué quieres hacer con ese dato, puedes verlo con un alert o guardarlo en alguna variable

Suponiendo que dendeveritas lo que necesitas saber es en concreto el nodo td (no la table) podrías hacer algo tipo ....

node = document.createElement("table");
teerre = document.createElement("tr")
tede = document.createElement("td")
tede.onclick = function(){
alert('this.id') // si tiene id, claro
mivariable = this.loquenecesites //guardas el dato que sea en una variable
}

Algo así sería, sin más datos no puedo mostrarte algo más concreto

epplestun · #5 (**permalink**) 18/01/2005, 10:28

La idea es poder crear, y modificar tablas con javascript y DOM, por eso queria saber si quiero modificar los estilos de una celda por ejemplo, deberia saber que celda es la que tengo seleccionada, o si quiero unir varias celdas, etc etc

tunait · #6 (**permalink**) 18/01/2005, 10:32

Entonces en la función anónima que te he sugerido basta con que envíe un this. Puedes enviarlo como argumento a alguna función que se encargue de hacer lo que sea

tede = document.createElement("td")
tede.onclick = function(){
otraFuncion(this)
}

function otraFuncion(que){
que.style.backgroundColor = '#ff0000'
}

Algo así te refieres ¿no?

epplestun · #7 (**permalink**) 18/01/2005, 10:45

si mas o menos ... mira estoy haciedno un ejemplo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body id="main">

<script type="text/javascript">
var z = 0;
function createTable(border, padding, spacing, align, unit, width, rows, cols) {
	if ((rows > 0) && (cols > 0)) {
		table = document.createElement("table");
		table.setAttribute("border", border);
		table.setAttribute("cellpadding", padding);
		table.setAttribute("cellspacing", spacing);
		table.setAttribute("align", align);
		table.style.width = width + unit;
		tbody = document.createElement("tbody");
		for (var i = 0; i < rows; i++) {
			tr = document.createElement("tr");
			for (var j = 0; j < cols; j++) {
				td = document.createElement("td");
				td.setAttribute("id", z);
				td.oncontextmenu = function(e) {
					celda = document.getElementById(this.id);
					celda.style.border = "1px solid #ffcc00";
					
					if(!document.all) {
						e.preventDefault();
					}	
					return false;
				}
				
				var br = document.createElement("br");
				td.appendChild(br);
				tr.appendChild(td);
				z++;
			}
			tbody.appendChild(tr);
		}
		table.appendChild(tbody); 
	}
	document.getElementById('main').appendChild(table);
}

createTable(0, 0, 0, "center", "px", 200, 5, 3);

createTable(1, 0, 0, "center", "px", 200, 3, 3);

function changeTableStyle() {
	seleccion = get();
	
	seleccion.setAttribute("border", "0px");
	seleccion.style.border = "1px solid #ffcc00";
	//table.style.borderColor = "ffcc00";
}
</script>
</body>
</html>

Lo que sucede es que tengo que tner un identiificador por cada celda que creo .... ;-(

epplestun · #8 (**permalink**) 18/01/2005, 10:50

jeje es facil jeje

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body id="main">

<script type="text/javascript">
var z = 0;
function createTable(border, padding, spacing, align, unit, width, rows, cols) {
	if ((rows > 0) && (cols > 0)) {
		table = document.createElement("table");
		table.setAttribute("border", border);
		table.setAttribute("cellpadding", padding);
		table.setAttribute("cellspacing", spacing);
		table.setAttribute("align", align);
		table.style.width = width + unit;
		tbody = document.createElement("tbody");
		for (var i = 0; i < rows; i++) {
			tr = document.createElement("tr");
			for (var j = 0; j < cols; j++) {
				td = document.createElement("td");
				td.oncontextmenu = function(e) {
					this.style.border = "1px solid #ffcc00";
					if(!document.all) {
						e.preventDefault();
					}	
					return false;
				}
				
				var br = document.createElement("br");
				td.appendChild(br);
				tr.appendChild(td);
				z++;
			}
			tbody.appendChild(tr);
		}
		table.appendChild(tbody); 
	}
	document.getElementById('main').appendChild(table);
}

createTable(0, 0, 0, "center", "px", 200, 5, 3);

createTable(1, 0, 0, "center", "px", 200, 3, 3);
</script>
</body>
</html>

jeje a ve si puedo ir mejorando todo esto y convertirlo a un objetillo :)

caricatos · #9 (**permalink**) 18/01/2005, 14:41

Hola a todos:

No sé si me enteré bien, pero tal como se crean elementos, se les puede asignar sus atributos, y uno de ellos es el id, y luego se referencian con el archiconocido getElementById()...

Para asignar atributos normales no es necesario el uso de setAttribute, pero es obligatorio para atributos "inventados".

Para tener un identificador para cada celda, y las creas con un bucle, podrías encadenar los números de los índices, y se podrían referenciar fácilmente.

Saludos