obtener solo el valor de un <tr> con onClick?

neram7 · #1 (**permalink**) 18/07/2012, 15:50

hola que tal tengo una tabla dinamica de datos y quisiera obtener el valor del td solo con darle click... la unica forma que se me ocurre es con el onclick..

<tr <?php if($i%2 != 0){ echo "class='odd'"; } ?> onclick="datosTextos();">

<td><input type="text" readonly="readonly" id="val"
value="<?php echo $codigol['codigo'];?>"/>

rodrigo791 · #2 (**permalink**) 18/07/2012, 16:35

bienvenido al foro.

usa el highlight para postear código, mostra el codigo de tu función datosTextos();
y todo el codigo html.
Acá solo damos javascritp asi que eso de <?php .... va en el foro de php, para hacerlo con javascript podes usar innerHTML sobre ese td que le haces click., ponerle un id a ese td y cuando le haces click entonces el innerHTML de ese td lo mostras en el value del input ese que tenes ahi

Diego89 · #3 (**permalink**) 18/07/2012, 17:12

Cambia tu html por esto:

Código HTML:

<table width="100%" border="2">
    <!-- Agregue un tributo data-* para poder recuperar el valor, el nombre de data puede ser lo que tú quieras en este casi es valor -->
    <tr data-valor="valor" class="click">
        <td>Prueba</td>
    </tr>
    <tr data-valor="valor2" class="click">
        <td>Prueba</td>
    </tr>
    <tr data-valor="valor3" class="click">
        <td>Prueba</td>
    </tr>
</table>

Agregue el atributo data para poder recuperar el valor de tu tr, ahora con una libería de Javascript en este caso jQuery has esto

Código Javascript:

Ver original$(function(){
    
    $(".click").click(function(e) {
        e.preventDefault();
        var data = $(this).attr("data-valor");
        alert(data);    
    });
 
});

Con eso podrías recuperar el valor de tu tr, te adjunto mi jsfidle para que lo puedas probar recuerda darle click al boton run para que lo veas en funcionamiento, haz click sobre los tr para que funcione el alerta.

http://jsfiddle.net/DiegoSeC/CQdMU/

emprear · #4 (**permalink**) 18/07/2012, 18:25

Cita:

Iniciado por Diego89

Cambia tu html por esto:

Código HTML:

<table width="100%" border="2">
    <!-- Agregue un tributo data-* para poder recuperar el valor, el nombre de data puede ser lo que tú quieras en este casi es valor -->
    <tr data-valor="valor" class="click">
        <td>Prueba</td>
    </tr>
    <tr data-valor="valor2" class="click">
        <td>Prueba</td>
    </tr>
    <tr data-valor="valor3" class="click">
        <td>Prueba</td>
    </tr>
</table>

Agregue el atributo data para poder recuperar el valor de tu tr, ahora con una libería de Javascript en este caso jQuery has esto

Código Javascript:

Ver original$(function(){
    
    $(".click").click(function(e) {
        e.preventDefault();
        var data = $(this).attr("data-valor");
        alert(data);    
    });
 
});

Con eso podrías recuperar el valor de tu tr, te adjunto mi jsfidle para que lo puedas probar recuerda darle click al boton run para que lo veas en funcionamiento, haz click sobre los tr para que funcione el alerta.

http://jsfiddle.net/DiegoSeC/CQdMU/

Convengamos que usar jQuery solo para eso es un exabrupto

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 valor_celda(celda){
alert(celda.innerHTML);
}
window.onload = function(){
var tags_td = new Array();
var tags_td=document.getElementsByTagName('td');
for (i=0; i<tags_td.length; i++) {
            if (tags_td[i].addEventListener) {   // IE9 y el resto
                tags_td[i].addEventListener ("click", function () {valor_celda(this)}, false);
            } 
            else {
                if (tags_td[i].attachEvent) {    // IE9 -
                    tags_td[i].attachEvent ('onclick',  function () {valor_celda(this)}, false);
                }
            }
}
}
//]]>
</script>
</head>
<body>
<table border="1" width="50%">
<tr>
<td>celda 1</td><td>celda 2</td>
</tr>
<tr>
<td>celda 3</td><td>celda 4</td>
</tr>
<tr>
<td>celda 5</td><td>celda 6</td>
</tr>
</table>
</body>
</html>

neram7 · #5 (**permalink**) 18/07/2012, 20:23

Gracias eso era lo que estaba buscando

MaxDgy · #6 (**permalink**) 18/07/2012, 20:37

Hola @emprear muy interesante lo que dices, pero una sola cosa con el código que propones usar.

Los usuarios que usan WinXP y son fieles al navegador IE8, no les funcionará el código ese y recibirán un mensaje de alerta: undefined

¿Se puede agregar una compatibilidad con dicho Browser?

emprear · #7 (**permalink**) 18/07/2012, 21:20

Cita:

Iniciado por MaxDgy

Hola @emprear muy interesante lo que dices, pero una sola cosa con el código que propones usar.

Los usuarios que usan WinXP y son fieles al navegador IE8, no les funcionará el código ese y recibirán un mensaje de alerta: undefined

¿Se puede agregar una compatibilidad con dicho Browser?

Si, efectivamente cometí un error, el problema en si es con el uso de this en attachEvent, que lo puse para simplificar
Podemos hacer esto

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 valor_celda(celda){
alert(celda.innerHTML);
}
window.onload = function(){
var tags_td = new Array();
var tags_td=document.getElementsByTagName('td');
for (i=0; i<tags_td.length; i++) {
            if (tags_td[i].addEventListener) {   // IE9 y el resto
                tags_td[i].addEventListener ("click", function () {valor_celda(this)}, false);
            } 
            else {
                if (tags_td[i].attachEvent) {    // IE9 -
//                    tags_td[i].attachEvent ('onclick',  function () {valor_celda(this)}, false);
   tags_td[i].setAttribute('onclick', 'valor_celda(this)');                 
                    
                }
            }
}
}
 
//]]>
</script>
</head>
<body>
<table border="1" width="50%">
<tr>
<td>celda 1</td><td>celda 2</td>
</tr>
<tr>
<td>celda 3</td><td>celda 4</td>
</tr>
<tr>
<td>celda 5</td><td>celda 6</td>
</tr>
</table>
</body>
</html>

es decir, utilizamos setAttribute, pero aún nos queda fuera IE7.
Otra alternativa, ahora si compatible con IE 6/7/8/9/ y el resto, sería definir el evento en cada elemento
<td onclick="valor_celda(this)">celda 1</td><td onclick="valor_celda(this)">celda 2</td>
Esta ultima posibilidad no sería dificil de implementar en este caso ya que la tabla es dinámica según lo dicho por @neram7

Saludos

PD:
Edito para hacer un agregado, yo hice esto pensando en los <td> como dice el post, me quedé clavado en "esto obtener el valor del td solo con darle click" y no en los <tr> lo que no es exactamente lo mismo

Algo así para las celdas de un misma fila

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);
    }
}
}
 
function vhtml(){
var divx =document.getElementById('x');
alert(divx.innerHTML);
}
//]]>
</script>
</head>
<body>
    <div id="x">
<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>
</div>
<button onclick="vhtml()">xxx</button>
</body>
</html>

se simplifica usando el id de cada fila

MaxDgy · #8 (**permalink**) 18/07/2012, 22:42

Que grande emprear!! Ahora sí, tiene compatibilidad y muy bien explicado!!

Ahora me pondré a repasar todo a full.

Saludos!