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

Pos: 1

Val: 302

Ha mantenido su posición en JQuery (en relación al último mes)

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

JQuery

(20)

Actualizado el 11 de Diciembre del 2020 por Xve (294 códigos) (Publicado el 13 de Abril del 2015)

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

Publicado el 13 de Abril del 2015

gráfica de visualizaciones de la versión: Versión 1.0

95.441 visualizaciones desde el 13 de Abril del 2015

<!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

Gracias brother. Me funciono.

Responder

Pedro

5 de Agosto del 2016

en donde llamas a la función?

Responder

xve

7 de Agosto del 2016

No se llama, hay un evento que se ejecuta al pulsar sobre un botón en la linea 9.

Responder

agu

26 de Septiembre del 2016

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

Excelente me funciono perfecto!

Responder

Anonimo

6 de Octubre del 2016

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

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

Excelente articulo, me ayudo en lo estancada que estaba! Muchas gracias

Responder

hola

11 de Mayo del 2017

No ha dejado ningún comentario

Responder

wew

4 de Julio del 2017

No ha dejado ningún comentario

Responder

Mario

14 de Julio del 2017

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

7 de Febrero del 2018

Excelente respuesta muchas gracias funciona a la perfección y se puede acceder elemento por elemento

Responder

Glass

21 de Junio del 2018

muy buena solución me ha servido bastante, muchas gracias

Responder

l4ner0

1 de Septiembre del 2018

Excelente tu código hermano, gracias por compartirlo.

Responder

lord sith

27 de Octubre del 2020

eereeeres un genio tenia días buscando esto, unas modificaciones y listo

Responder

Tony_b

23 de Noviembre del 2018

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

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

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

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

xve

11 de Diciembre del 2020

Aquí tienes como hacerlo: https://www.lawebdelprogramador.com/codigo/JQuery/6764-Obtener-todos-los-valores-de-una-columna-pulsando-un-boton-en-dicha-columna-con-JQuery.html

Responder