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: 347
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

Actualizado el 11 de Diciembre del 2020 por Xve (291 códigos) (Publicado el 13 de Abril del 2015)
65.275 visualizaciones desde el 13 de Abril del 2015
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


El mismo código pero obteniendo los valores de las columnas: https://www.lawebdelprogramador.com/codigo/JQuery/6764-Obtener-todos-los-valores-de-una-columna-pulsando-un-boton-en-dicha-columna-con-JQuery.html

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(20)

Publicado el 13 de Abril del 2015gráfica de visualizaciones de la versión: Versión 1.0
65.277 visualizaciones desde el 13 de Abril del 2015
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 (20)

Yunior
1 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Gracias brother. Me funciono.
Responder
5 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
en donde llamas a la función?
Responder
Imágen de perfil
7 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
6 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente me funciono perfecto!
Responder
Anonimo
6 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
En caso de querer recuperar valor especifico hice esto:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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
4 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 :
-----------------------------------------------------------------
1
2
3
4
5
var valores="";
 
$(this).parents("tr").find("td").each(function(){
    valores+=$(this).html()+"\n";
});
-----------------------------------------------------------


Por esto :
----------------------------------------------------------
1
2
3
4
5
6
7
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
7 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
1 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Excelente tu código hermano, gracias por compartirlo.
Responder
lord sith
27 de Octubre del 2020
estrellaestrellaestrellaestrellaestrella
eereeeres un genio tenia días buscando esto, unas modificaciones y listo
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:

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
9
10
11
12
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
Ysmak
10 de Diciembre del 2020
estrellaestrellaestrellaestrellaestrella
Hola como hago esto mismo pero para obtener todos los datos de una columna? Tengo una tabla con una columna llamada "productos" y necesito todos los datos que tenga esa columna, este ejemplo toma todos los valores de una fila que eso no me sirve tiene que ser toda la columna. Gracias de antemano
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3134