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(6)
Publicado el 13 de Abril del 2015 por xve
8.292 visualizaciones desde el 13 de Abril del 2015. Una media de 98 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(6)

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

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

Comentar la versión: Versión 1.0

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

http://lwp-l.com/s3134