Foros del Web » Programación web » Javascript »

Recuperar datos de tabla html

Estas en el tema de Recuperar datos de tabla html en el foro de Javascript en Foros del Web. Buenas!!! Mi problema es el siguiente: Tengo una tabla en html y e puesto el codigo javascript que hace que pueda seleccionar la fila que ...
  #1 (permalink)  
Antiguo 29/05/2007, 11:26
 
Fecha de Ingreso: diciembre-2006
Mensajes: 50
Antigüedad: 7 años, 9 meses
Puntos: 1
Recuperar datos de tabla html

Buenas!!!
Mi problema es el siguiente: Tengo una tabla en html y e puesto el codigo javascript que hace que pueda seleccionar la fila que quiera haciendo click sobre ella, mi pregunta es como hago para recuperar el cod_cliente del registro seleccionado??

Aqui pongo el codigo que tengo:

<html>
<head>
<STYLE TYPE="text/css">{ cursor: pointer }</STYLE>
</head>
<body>
<TABLE border=1 width=100% id="tbuscar">
<TH width=5%>Cod_Cliente</TH><TH width=15%>Nombre</TH><TH width=30%>Apellidos</TH>
<TR style='cursor: pointer'>
<TD>001</TD><TD>Alberto</TD><TD>Garcia</TD>
</TR>
</TABLE>
<script type="text/javascript">
var seleccionado=null;
function onclickHandler()
{
if(seleccionado==this)
{
this.style.backgroundColor="transparent";
seleccionado=null;
}
else
{
if(seleccionado!=null)
seleccionado.style.backgroundColor="transparent";
this.style.backgroundColor="#9999FF";
seleccionado=this;
}
}
var filas=document.getElementById("tbuscar").getElemen tsByTagName("tr");
for(var i=1; i<filas.length; i++)
{
filas[i].onclick=onclickHandler;
}
</script>
</body>
</html>

Muchas gracias
  #2 (permalink)  
Antiguo 29/05/2007, 14:25
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 9 años, 8 meses
Puntos: 9
Re: Recuperar datos de tabla html

document.getElementById("tbuscar").firstChild.inne rHTML
  #3 (permalink)  
Antiguo 29/05/2007, 14:35
Avatar de netzky  
Fecha de Ingreso: mayo-2007
Mensajes: 56
Antigüedad: 7 años, 4 meses
Puntos: 1
Pregunta Re: Recuperar datos de tabla html

mmm... al hacer esto, no estaria seleccionando al theader?, yo estuve probando tu script, y la manera de resolverlo, o la mas rapida, fue, ponerle a los tr, un onmouseover: mifuncion(), la cual es una funcion, que hace lo siguiente, al pasar por el elemento usa el metodo "this" es decir el elemento actual por el cual pasas encima, ya con esto, simplemente, atravez del DOM llegas al primer hijo del tr por el que pasas, y listoo... salu2
  #4 (permalink)  
Antiguo 29/05/2007, 15:48
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años
Puntos: 44
Re: Recuperar datos de tabla html

Sí, opino que es mejor la solución de netzky, sobretodo por los elementos de texto, que se pueden contar (o no, dependiendo de si el navegador es IE) como nodos hijos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 30/05/2007, 03:34
 
Fecha de Ingreso: diciembre-2006
Mensajes: 50
Antigüedad: 7 años, 9 meses
Puntos: 1
Re: Recuperar datos de tabla html

Bueno muchas gracias a todos, lo que pasa es que soy nuevo en esto del javascript, soy novato y no e entendido lo que me as querido decir netzky, poner en los tr el evento onmouseover?, no seria el evento onclick, para cuando yo pinche en la fila?.
Tampoco entiendo que es el DOM: "atravez del DOM llegas al primer hijo del tr por el que pasas".

Si no es mucha molestia, me podrias poner el codigo o un ejemplo para entenderlo??

MUCHAS GRACIAS!!!!
  #6 (permalink)  
Antiguo 30/05/2007, 05:56
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 9 años, 8 meses
Puntos: 9
Re: Recuperar datos de tabla html

filas[i].firstChild.innerHTML
  #7 (permalink)  
Antiguo 30/05/2007, 06:53
 
Fecha de Ingreso: mayo-2007
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Re: Recuperar datos de tabla html

sta muy sencillo... venga... voy a estrujar las 2 neuronas que tengo...
Código:
<html>
<head>
<STYLE TYPE="text/css">{ cursor: pointer }</STYLE>
</head>
<body>
<TABLE border=1 width=100% id="tbuscar">
<TH width=5%>Cod_Cliente</TH><TH width=15%>Nombre</TH><TH width=30%>Apellidos</TH>
<TR style='cursor: pointer' onclick='muestra(001)'>
<TD>001</TD><TD>Alberto</TD><TD>Garcia</TD>
</TR>
</TABLE>
<script type="text/javascript">
function muestra(valor){
   alert(valor);
}
</script>
solo tienes que crear la tabla con ese dato... yo lo tengo con paginas dinamicas en jsp y me va perfecto.. en jsp para que veas mas o menos...
CODIGO JSP:
Código:
for(int a=0;a<b;a++){
   out.print("<TR style='cursor: pointer' onclick='muestra("+codigo[a]+")'>");
   out.print("<TD>"+codigo[a]+"</TD><TD>"+nombre[a]+"</TD><TD>"+apellido[a]+"</TD>");
}
ahora si lo que tienes es la tabla ya creada.. pues tambien facil... como ya te han dicho

Código:
<TR style='cursor: pointer' onclick='muestra(this)'>
<TD>001</TD><TD>Alberto</TD><TD>Garcia</TD>
javascript:
Código:
function muestra(ObjetoTR){
   alert(ObjetoTR.cells[0].childNodes[0].nodeValue);
}
te explico... el objeto TABLE tiene propiedades como rows... y saber cuantos TR contiene la tabla. Por ello el TR tiene la propiedad cells para saber cuantos TD tiene. ej. ObjetoTR.cells.length... daria 3 en el caso anterior, el indice empieza desde 0.
Pues al tajo... si necesito saber su primer TD.. ObjetoTR.cells[0] ... y ahora ya estoy dentro del TD, que paramentros hay.. el INNERHTML, como indican, pero me gusta más ir al meollo... childNodes[0].nodeValue...



No se si te he aclarado alguna duda o te he despistado más, pero me costo entender la estructura de la tabla en su dia... gracias al firefox y el DomInspector(plugin para desarrolladores)...
Un saludo.
  #8 (permalink)  
Antiguo 30/05/2007, 07:49
 
Fecha de Ingreso: diciembre-2006
Mensajes: 50
Antigüedad: 7 años, 9 meses
Puntos: 1
Re: Recuperar datos de tabla html

Gracias a todos, muy bien explicado seconddj te lo as currado, pero tengo un pequeño problema, tengo la funcion javascript que cuando haces click en una fila se marca y se colorea(la funcion esta en mi primer mensaje), entonces no me deja poner otro evento onclick, no me hace caso, no me saca el alert, y si quito la funcion javascript si que me funciona, alguna idea???

De todas formas gracias por las aclaraciones, ya veré si se me ocurre algo.
  #9 (permalink)  
Antiguo 30/05/2007, 09:07
 
Fecha de Ingreso: mayo-2007
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Re: Recuperar datos de tabla html

tan sencillo como poner en la funcion mia esta linea que substituye a tu javascript...

Código:
valor.className=valor.className=='marcado'?'desmarcado':'marcado';
bueno... faltan cosas... crea un par de estilos... y listo!!!

Código:
<html>
<head>
<STYLE TYPE="text/css">
.marcado{
	background: transparent;
}
.desmarcado{
	background: #99F;
}
{ cursor: pointer }</STYLE>
</head>
....
y el javascript que tienes lo puedes quitar, es más complicado... y llegará un momento que de tanto código se te hara un ovillo.

ahora el javascript completo seria:
Código:
function muestra(valor){
   valor.className=valor.className=='marcado'?'desmarcado':'marcado';
   alert(valor);
}
lo que estamos diciendo es que el className hace referencia a unos estilos que hemos creado en el HEAD y le hemos puesto el '.' delante del nombre.

un saludo, si te funciona comentalo...
  #10 (permalink)  
Antiguo 30/05/2007, 14:21
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años
Puntos: 44
Re: Recuperar datos de tabla html

Un ejemplo para no ensuciar el HTML:

Código PHP:
<TABLE id="tabla">
    <
tr>
        <
TH>Cod_Cliente</TH>
        <
TH>Nombre</TH>
        <
TH>Apellidos</TH>
    </
tr>
    <
tr>
        <
TD>001</TD>
        <
TD>Alberto</TD>
        <
TD>Garcia</TD>
    </
tr>
    <
tr>
        <
TD>002</TD>
        <
TD>Paco</TD>
        <
TD>Montes</TD>
    </
tr>
</
TABLE>

<
script>

document.getElementById("tabla").onclick=function(e){ 
    
// obtenemos el elemento sobre el que se ha hecho click
    
if(!e)e=window.event
    if(!
e.targete.target=e.srcElement
    
// e.target ahora simboliza la celda en la que hemos hecho click
    // subimos de nivel hasta encontrar un tr
    
var TR=e.target;
    while( 
TR.nodeType==&& TR.tagName.toUpperCase()!="TR" )
        
TR=TR.parentNode;
    var 
celdas=TR.getElementsByTagName("TD");
    
// cogemos la primera celda TD del tr (si existe)
    
if( celdas.length!=)
        
// devolvemos su contenido
        
alertceldas[0].innerHTML );
}

</script> 

Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #11 (permalink)  
Antiguo 30/05/2007, 15:15
 
Fecha de Ingreso: diciembre-2006
Mensajes: 50
Antigüedad: 7 años, 9 meses
Puntos: 1
Re: Recuperar datos de tabla html

Buenas, e tenido problemas, el codigo de seconddj no me termina de funcionar, recuperar el valor de la tabla si me sale, pero no se colorea la linea a la que hago click.
No se por que , parece que no coje los estilos, en la parte de codigo:

valor.className=valor.className=='marcado'?'desmar cado':'marcado';

como sabe que linea colorear? ya que valor es un numero (001).

Lo que e hecho a sido mantener mi funcion inicial cuando hago click en la fila, y recupero el valor haciendo doble click, que me vale para lo que quiero hacer.

Muchas gracias a todos por la ayuda.
  #12 (permalink)  
Antiguo 30/05/2007, 17:13
 
Fecha de Ingreso: mayo-2007
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Re: Recuperar datos de tabla html

si cojes la opcion de
Código:
<TR style='cursor: pointer' onclick='muestra(001)'>
no te va a funcionar, ya que no pasas el objeto TR a la funcion.
Puedes pasarlo como segundo parametro

Código:
<TR style='cursor: pointer' onclick='muestra(001,this)'>
ahora la funcion sera..
Código:
function muestra(valor,objeto){
    alert(valor);// tiene que aparecer 001
    objeto.className=objeto.className=='marcado'?'desmarcado':'marcado';
}

ahora prueba de poner esta funcion

Código:
function muestra(valor,objeto){
    objeto.className=objeto.className=='marcado'?'desmarcado':'marcado';
    alert(valor);// tiene que aparecer 001
    alert(objeto.cells[0].childNodes[0].nodeValue);// tiene que aparecer 001 tambien
}
resumiendo, si a una funcion le pasa como parametro THIS, estas haciendo referencia al objeto que la llama. Con eso puedes obtener lo que quieras.

otro ejemplo:(stoy yo con ganas de hablar)


Código PHP:
<html>
<
head>
<
STYLE TYPE="text/css">
.
desmarcado{
    
backgroundtransparent;
}
.
marcado{
    
background#99F;
}

</
STYLE>
</
head>
<
body>
<
table id='TABLApepe' border='1'>
  <
thead>
    <
tr><th>nombre</th><th>apellido</th></tr>
  </
thead>
  <
tbody>
     <
tr style='cursor:pointer' class='desmarcado' onclick='muestra(this)'><td>pepe</td><td>goteras</td></tr>
  </
tbody>
</
table>

<
table id='TABLApepe2' border='1'>
    <
tr><th>nombre</th><th>apellido</th></tr>
    <
tr style='cursor:pointer' class='desmarcado' onclick='muestra(this)'><td>manolo</td><td>benito</td></tr>
</
table>
<
script type="text/javascript">
function 
muestra(objeto){
    
objeto.className=objeto.className=='marcado'?'desmarcado':'marcado';
    
alert(objeto.cells[0].childNodes[0].nodeValue);// tiene que aparecer pepe

    //si quiero saber el id de la tabla, que no deja de ser un parametro

    
alert(objeto.parentNode.parentNode.id);// tiene que aparecer TABLApepe o TABLApepe2 

    //parentNode lo que haces es preguntar por el padre del TR, osea el TBODY y luego su padre, que es la tabla y nos da el id

    
alert(objeto.offsetParent.id);// tambien aparecera TABLApepe o TABLApepe2

    //offsetParent nos situará en la tabla

}
</script>
</body>
</html> 

Ahora tengo 2 tablas, en una con THEAD y TBODY y la otra no.
En la funcion javascript va a preguntar por los padres y aunque no hayas puesto el tbody, realmente existe y cuenta para moverte a traves del objeto.
Si nos movemos con los hijos CHILDNODES pasa lo mismo, por eso utilizo mejor los parametros rows y cells.
ejemplo:
Código:
<script type="text/javascript">
alert(document.getElementById('TABLApepe2').rows[0].cells[0].childNodes[0].nodeValue);
</script>
te dará el texto de la primera celda, osea, 'nombre'

todo esto lo he investigado con firefox y realmente me ha ayudado mucho, ya que el DomInspector que viene al instalarlo, te daria la tabla en forma de arbol. ejemplo TABLApepe2.
Código:
TABLE
   |---text(vacio)
   |---TBODY
   |     |----TR
   |     |   |---TH
   |     |   |    '----text(aqui vendria nombre)
   |     |   '---TH
   |     |         '----text(aqui vendria apellido)
   |     |----text(vacio)
   |     |----TR
   |     |    |---TD
   |     |    |    '----text(aqui vendria manolo)
   |     |    '---TD
   |     |          '----text(aqui vendria benito)
   |     '----text(vacio)
   |....etc
un saludo...
  #13 (permalink)  
Antiguo 05/11/2012, 08:46
 
Fecha de Ingreso: noviembre-2012
Mensajes: 1
Antigüedad: 1 año, 11 meses
Puntos: 0
Pregunta Respuesta: Recuperar datos de tabla html

Una Consulta como Recupero los datos de una Fila Si esta Fue llenada en php

COMO LO HAGO AYUDA!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 14:34.
SEO by vBSEO 3.3.2