Moverse a través del DOM

elnew_luis · #1 (**permalink**) 10/06/2012, 13:29

Hola, tengo una tabla donde muestro algunos registros, mi duda es como acceder a el valor de una celda a tráves del DOM, uso javascript y php, en la tabla tengo una celda denominada "Eliminar" y esta celda contiene un icono, es una imagen y en su evento "onclick" llamo a la funcion javascript donde quiero obtener el valor de una celda anterior que no estoy mostrando.
esta es la funcion js

function del_prod(){
var icon = document.getElementsByName('icon_del');
var td_id_producto = icon.
loadAsync("controller/del_prod.php?id_producto=" + td_id_producto + "","div_alert_add_prod");
load_table();
}

la celda anterior tiene un valor que quiero enviar como parametro por la url. Como obtengo dicho valor, se que me tengo que mover a tráves del DOM pero no se como.

emprear · #2 (**permalink**) 10/06/2012, 13:45

Te dejo un ejemplo (aplicado a otra cosa) pero en el cual acceder al contenido de la celda clickeada, tendrías que adaptarlo a tus necesidades

Código HTML:

Ver original<!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>
<title>Recuperar datos de celdas en una fila</title>
<style type="text/css">
/*<![CDATA[*/
tr{
background: cyan;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function recuperarFila(idfila) {
var elTableRow = document.getElementById(idfila);
elTableRow.style.backgroundColor =(elTableRow.style.backgroundColor=="green")?'cyan':'green';
 
if(elTableRow.style.backgroundColor == 'green'){
var elTableCells = elTableRow.getElementsByTagName("td");
    for (var i=0; i<elTableCells.length; i++) {
    alert(elTableCells[i].innerHTML);
    }
}
}
//]]>
</script>
</head>
<body>
<table border="1" width="50%">
<tr id="fila_uno" onclick="recuperarFila(this.id)">
<td>celda 1</td><td>celda 2</td>
</tr>
<tr id="fila_dos" onclick="recuperarFila(this.id)">
<td>celda 3</td><td>celda 4</td>
</tr>
<tr id="fila_tres" onclick="recuperarFila(this.id)">
<td>celda 5</td><td>celda 6</td>
</tr>
</table>
</body>
</html>

basicamente el array() generado por
var elTableCells = elTableRow.getElementsByTagName("td");
es recorrido y se obtiene el innerHTML, que es el contenido de la celda, de cada una

Saludos

IsaBelM · #3 (**permalink**) 10/06/2012, 14:03

si usas la función previousSibling() es sencillo

elnew_luis · #4 (**permalink**) 10/06/2012, 16:54

pues sigo intentado, ahora la estructura esta asi:

<tr>
<td style='display:none;'><img src='' name='' id='icon_delete' onclick='obten_id'></td>
<td id='id_producto'>8</td>
</tr>

<script>
function obten_id(){
var icono = document.getElementById('icon_delete').nextSibling .innerHTML; ???
ajax("procesa.php?icono=" + icono + "", "div");
}
</script>

??? se hará asi? no obtengo nada, no puedo obtener el valor de la celda.
ojo! la celda no la estoy mostrando, esta oculta.

IsaBelM · #5 (**permalink**) 10/06/2012, 17:42

primeramente hablabas de una celda anterior, de ahí que te recomendara previousSibling(). ahora usas nextSibling() por que es una celda posterior

pero lo mas destacado es que intentas invocar una función desde un elemento que está oculto

eso no es posible

elnew_luis · #6 (**permalink**) 10/06/2012, 20:11

no me entediste, el metodo lo invoco desde un ccelda visible, pero ya estoy cerca de la solucion: tienes razon la celda estaba antes del metodo,ahora la movi despues del metodo pero al final eso es irrelevante.
mi codigo es el sig y estoy cerca de logralo, de hecho solo falta pasarle a la funcion el parametro de donde se haga clic.

function del_prod(){
var icon = document.getElementById('icon_del').parentNode.nex tSibling.nextSibling.innerHTML;
alert(icon);
loadAsync("controller/del_prod.php?id_producto=" + td_id_producto + "","div_alert_add_prod");
load_table();
}

saludos. Gracias por sus opiniones fueron de ayuda y juntos compartimos ideas y conocimiento, "Porque el conocimiento no vale nada si no lo compartimos"

IsaBelM · #7 (**permalink**) 11/06/2012, 05:04

Cita:

Iniciado por elnew_luis

si te he entendido. eres tú, el que no te aclaras. por cierto no estás invocando a la función, pero creo que eso ya lo has solventado.

respondiendo a tu último post, el código es correcto si tu intención es obtener el valor da la celda adyacente "8".

si no muestras la estructura, no voy a ser yo quién me ponga a jugar a las adivinanzas