Obtener Datos de una Tabla

leidy_03 · #1 (**permalink**) 05/06/2012, 10:38

Buenos Días amigos del foro.

Soy principiante en esto de javascript (o la verdad no se si sea este el tema adecuado). Quisiera saber como hago al dar click sobre una fila de una tabla esta se me pinte y obtener los datos de esa fila ya pintada.

Gracias de antemano por su colaboración.

Pablo Ayala · #2 (**permalink**) 05/06/2012, 11:54

Eso de pintar las tablas esta fácil... pero eso de obtener los datos de esa fila... no entendí... los necesitas para una consulta a la base de datos?

Quizá solo necesitas el ID del registro y no todos los datos... ?

Que intentas hacer en realidad?

Saludos

emprear · #3 (**permalink**) 05/06/2012, 12:24

Basicamente lo que necesitas es una función que,
1. Identifique la fila sobre la que trabajás
2. Recorrer las celdas para esa fila, y extraer los valores

Para el tema del color, habiendo identificado la fila, le cambiás la propiedad style.backgroundColor también con el javascript, aunque ya es más complejo cuando se quire que al clickearla de vuelta regrese a su color, ó que tambien lo haga al hacer el out del mouse, hay variantes muy específicas, todo depende de lo que quieras hacer

ejemplo

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>

Saludos

leidy_03 · #4 (**permalink**) 05/06/2012, 13:56

ok emprear, gracias por tu ayuda y gracias Pablo Ayala