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

Imágen de perfil

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


JQuery

estrellaestrellaestrellaestrellaestrella(10)
Publicado el 13 de Abril del 2015 por xve
17.953 visualizaciones desde el 13 de Abril del 2015. Una media de 154 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

Versión 1.0
estrellaestrellaestrellaestrellaestrella(10)

Publicado el 13 de Abril del 2015gráfica de visualizaciones de la versión: Versión 1.0
17.959 visualizaciones desde el 13 de Abril del 2015. Una media de 154 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 (10)

Yunior
01 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Gracias brother. Me funciono.
Responder
Pedro
05 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
en donde llamas a la función?
Responder
Imágen de perfil
xve
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
agu
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
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
jrnjf
Responder
wew
04 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Mario
Hace 7d
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

Comentar la versión: Versión 1.0

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

http://lwp-l.com/s3134