Código de JQuery - Obtener todos los valores de una fila pulsando un botón en dicha fila con JQuery

Imágen de perfil
Val: 537
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Obtener todos los valores de una fila pulsando un botón en dicha fila con JQuerygráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(17)
Actualizado el 07 de Febrero del 2018 por xve (Publicado el 13 de Abril del 2015)
41.151 visualizaciones desde el 13 de Abril del 2015. Una media de 203 por semana
En este ejemplo, se muestra como obtener el contenido de todos los <td> de una fila cualquiera de una tabla pulsando un botón ubicado en dicha fila.

coger-valores-fila



Aquí el mismo código con JavaScript
https://www.lawebdelprogramador.com/codigo/JavaScript/4426-Obtener-todos-los-valores-de-una-fila-pulsando-un-boton-en-dicha-fila-con-JavaScript.html

Versión 1.0
estrellaestrellaestrellaestrellaestrella(17)

Publicado el 13 de Abril del 2015gráfica de visualizaciones de la versión: Versión 1.0
41.152 visualizaciones desde el 13 de Abril del 2015. Una media de 203 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
    <script>
    $(document).ready(function(){
        $(".boton").click(function(){
 
            var valores="";
 
            // Obtenemos todos los valores contenidos en los <td> de la fila
            // seleccionada
            $(this).parents("tr").find("td").each(function(){
                valores+=$(this).html()+"\n";
            });
 
            alert(valores);
        });
    });
    </script>
 
    <style>
        .boton {border:1px solid #808080;cursor:pointer;padding:2px 5px;color:Blue;}
    </style>
</head>
 
<body>
    <table border="1" cellspacing="0" cellpadding="5">
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
            <td class="boton">coger valores de la fila</td>
        </tr>
        <tr>
            <td>val 4</td>
            <td>val 5</td>
            <td>val 6</td>
            <td class="boton">coger valores de la fila</td>
        </tr>
        <tr>
            <td>val 7</td>
            <td>val 8</td>
            <td>val 9</td>
            <td class="boton">coger valores de la fila</td>
        </tr>
    </table>
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (17)

Yunior
01 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Gracias brother. Me funciono.
Responder
05 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
en donde llamas a la función?
Responder
Imágen de perfil
07 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
No se llama, hay un evento que se ejecuta al pulsar sobre un botón en la linea 9.
Responder
26 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
En caso de que quiera recuperar el dato de un campo especifico por ejemplo el tercer campo de una fila seleccionada como tendria que hacer?
Responder
Kevin
06 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente me funciono perfecto!
Responder
Anonimo
06 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
En caso de querer recuperar valor especifico hice esto:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
$(".boton").click(function(){

var valores="";

// Obtenemos todos los valores contenidos en los <td> de la fila
// seleccionada
$(this).parents("tr").find("#numero").each(function(){
valores+=$(this).html()+"\n";
});
console.log(valores);
alert(valores);
});
});
</script>

<style>
.boton {border:1px solid #808080;cursor:pointer;padding:2px 5px;color:Blue;}
</style>
</head>

<body>
<table border="1" cellspacing="0" cellpadding="5">
<thead>
<tr>
<td>Nombre 1</td>
<td>Nombre 2</td>
<td>Apellido 1</td>
<td>Mantenimiento</td>
</tr>
</thead>
<tr>
<td id="numero">Kevin</td>
<td>Joseph</td>
<td>Ramos</td>
<td class="boton">coger valores de la fila</td>
</tr>
<tr>
<td id="numero">Viviana</td>
<td>Belen</td>
<td>Rojas</td>
<td class="boton">coger valores de la fila</td>
</tr>
<tr>
<td id="numero">Junior</td>
<td>Gerardo</td>
<td>Nosé</td>
<td class="boton">coger valores de la fila</td>
</tr>
</table>
<br>
<form action="">
<label for="">Nombre</label>
<input type="text" value="">
</form>
</body>
</html>
Responder
Nancy
27 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Muy bueno, pero una duda, ¿cómo podría hacerlo si quiero obtener el valor de dos columnas dentro de la misma fila? ¿Es posible?
Responder
Juliana
23 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Excelente articulo, me ayudo en lo estancada que estaba! Muchas gracias
Responder
hola
11 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
wew
04 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Mario
14 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Hola, para los que preguntan como poder acceder a un campo especifico de la fila que se ha seleccionado, les comparto mi solución:

Reemplazar esto :
-----------------------------------------------------------------
var valores="";

$(this).parents("tr").find("td").each(function(){
valores+=$(this).html()+"\n";
});
-----------------------------------------------------------


Por esto :
----------------------------------------------------------
var valores = new Array();
i=0;

$(this).parents("tr").find("td").each(function(){
valores[i] =$(this).html();
i++;
});
--------------------------------------------------------------


De esta forma "valores" es ahora un array lo que es mucho mas funcional que una variable ya que podemos acceder a cualquier elemento de la fila por su posición, por ejemplo si queremos obtener el primer elemento lo obtendremos con la expresión valores[0] o de la misma forma si queremos obtener el quinto elemento lo obtenemos con valores[4].
Espero les sirva
Sldos
Responder
Jose
07 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Excelente respuesta muchas gracias funciona a la perfección y se puede acceder elemento por elemento
Responder
Glass
21 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
muy buena solución me ha servido bastante, muchas gracias
Responder
l4ner0
01 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Excelente tu código hermano, gracias por compartirlo.
Responder
Tony_b
23 de Noviembre del 2018
estrellaestrellaestrellaestrellaestrella
Mil gracias a todos! un post magnífico, buenas soluciones en los comentarios. tengo más de lo que vine buscando.
Responder
Antonio
19 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
En caso de desear recuperar un campo especifico de la devoucion:

en la codificacion:

var valores="";

// Obtenemos todos los valores contenidos en los <td> de la fila
// seleccionada
$(this).parents("tr").find("td").each(function(){
valores+=$(this).html()+"\n";
});

Cambiala por: donde el retorno se dividen los elementos por un espacio en blanco u otro elemento que consideres

var valores="";

// Obtenemos todos los valores contenidos en los <td> de la fila
// seleccionada
$(this).parents("tr").find("td").each(function(){
valores+=$(this).html()+" ";
});

// Realizas un split de la cadena de retorno

// NumerodeElementosaRetornar: Cuantos elementos se desean de la cadena
var arreglo = valores.split(" ", NumerodeElementosaRetornar)

luego en: arrego[0], arrego[1], etc. Estan los elementos deseados

debes controlar el caso en el cual los elementos poseen espacios vacios o el indicador por el cual estas dividiendo.
Responder
armando
14 de Febrero del 2019
estrellaestrellaestrellaestrellaestrella
Buenos dias, me funciona pero solo con la primera fila de la tabla, las demas fila no muestra nada :(
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3134
Revisar política de publicidad