[SOLUCIONADO] jquery obtener el valor de un value button

reynierlima · #1 (**permalink**) 19/10/2013, 10:21

jquery obtener el valor de un value button

Hola buenas tardes a todos,
tengo el siguiente problema llevo días intentando encontrar la solución pero hasta el día de hoy no lo he logrado.

se perfectamente como se obtiene el valor del atributo value con jquery pero en el código que he desarrollado ahora no logro obtener el valor solo obtengo el valor del primer value. La cosa es que estoy creando una tabla dinamicamente desde jquery y también genero un button yo quería obtener los valores de cada uno de los button al pinchar sobre el pero solo obtengo el primer valor.

El problema es que así solo obtengo el value del primer button. Y creo que esto sucede porque al hacer "$(table).appendTo('.tabla');" la tabla se añade al <div class="tabla"></div>

$(".tabla").click(function() {
var v =$(".tabla .eliminar").val();
alert(v);
});

Dejo el código completo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Marketing Digital Networks</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></script>
<meta name="description" content="Marketing Digital Network" />

<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#crear_tabla").click(function() {
var table = document.createElement("table"); // Se crea el elemento table
for (i=1; i<=6; i++) {
var tr = document.createElement("tr"); // Se crea el elemento fila

var td = document.createElement("td"); // Se crea el elemento columna
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i;
tr.appendChild(td);

var td = document.createElement("td");
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i;
tr.appendChild(td);

var td = document.createElement("td");
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i + '<button value="' + i + '" class="eliminar">Eliminar</button>';
tr.appendChild(td);

table.appendChild(tr); // Se añade la fila a la tabla
}
$(table).appendTo('.tabla'); // se añade la tabla al div cuyo nombre es tabla
});

$(".tabla").click(function() {
var v =$(".tabla .eliminar").val();
alert(v);
});
});
</script>
</head>
<body>
<div class="tabla"></div>
<button style="margin-bottom: 10px;" id="crear_tabla" class="btn">Crear tabla</button>
</body>
</html>

Agradecería que me ayuden ya que esto es muy importante lo necesito solucionar para mi proyecto que estoy haciendo en la universidad. Muchas gracias a todos.

hackjose · #2 (**permalink**) 19/10/2013, 17:41

Que tal

Te recomiendo que pongas tu codigo en un highlight ya sea javascript html css

Para obtener el valor de un elemento button, debes usar el metodo text() de jquery, tambien se puede con el metodo html()

saludos

reynierlima · #3 (**permalink**) 20/10/2013, 04:48

gracias por contestar hackjose pero no entiendo lo que me quieres decir con highlight . yo obtengo el valor del elemento button pero solo me devuelve el primer valor si te fijas tengo un bucle y el button esta dentro del bucle td.innerHTML ="Prueba" + i + '<button value="' + i + '" class="eliminar">Eliminar</button>'; y en value va tomando los distintos valores de la varible i la cosa es que cuando se ejecuta el listener

$(".tabla").click(function() {
var v =$(".tabla .eliminar").val(); -- aqui obtengo el valor del buton eliminar pero solo me devuelve el 1 valor
alert(v);
});

solo obtengo el primer valor del button y si pincho en los demás button que se generan de forma dinamica me sigue devolviendo el 1 valor ese es el problema

he usado ya los dos métodos que me has recomendado alert($(".elimina").text()); alert($(".elimina").html()); pero sigo con el mismo problema solo me devuelve el valor del primer buttony los demás si pincho sobre ellos me devuelve el mismo valor que el 1 button

rottenp4nx · #4 (**permalink**) 20/10/2013, 11:36

Tienes que jugar con las funciones .next(), .find(), .first(), etc.

Saludos

reynierlima · #5 (**permalink**) 20/10/2013, 13:31

si no veo un ejemplo me parecera dificil porque ya he probado de muchas formas y sigo obteniendo el mismo valor de los botones value

gebremswar · #6 (**permalink**) 20/10/2013, 15:56

Hola reynierlima, que tal.

El selector "$('.tabla .eliminar')" es una colección de elementos. Entonces no puedes pretender obtener el valor de ellos, con .val(), como si se tratara de uno solo.

Deberás recorrer los elementos que obtendrás con el método .each(), de la siguiente manera:

Código Javascript:

Ver original$('.tabla').click(function() {
    $('.tabla .eliminar').each(function(){
        alert($(this).val()) // te mostrará tantos "alerts" como buttons con clase "eliminar" tengas.
    });
});

reynierlima · #7 (**permalink**) 20/10/2013, 16:13

Gebremswar gracias ya pude obtener los valores de los buttons. Pero yo lo que necesito saber exactamente ahora es como saber de los varios buttons que se van generando el valor del button que se haya clicado en el momento no de todos.

reynierlima · #8 (**permalink**) 20/10/2013, 16:20

Gebremswar gracias ya pude obtener los valores de los buttons. Pero yo lo que necesito saber exactamente ahora es como saber de los varios buttons que se van generando el valor del button que se haya clicado en el momento no de todos.

gebremswar · #9 (**permalink**) 20/10/2013, 20:17

Lo que te recomiendo es que consultes la API de JQuery y aprendas a usar esta librería. Ya que después del ejemplo que dejé no deberías preguntar algo como lo de tu último mensaje.

Código Javascript:

Ver original$('.tabla').on('click', function() {
    alert($(this).find('.eliminar').val())
});

reynierlima · #10 (**permalink**) 21/10/2013, 01:45

Agradezco tu tiempo y tu respuesta eso lo había probado lo que me devuelve es el primer valor del button pero si pincho en otros botones me devuelve el mismo valor que el primer button

$('.tabla').on('click', function() {
alert($(this).find('.eliminar').val());
});

gebremswar · #11 (**permalink**) 21/10/2013, 07:39

Cita:

Iniciado por reynierlima

Agradezco tu tiempo y tu respuesta eso lo había probado lo que me devuelve es el primer valor del button pero si pincho en otros botones me devuelve el mismo valor que el primer button

$('.tabla').on('click', function() {
alert($(this).find('.eliminar').val());
});

Tienes razón, cometí un error. Lo que necesitas es delegar el evento al button de la siguiente manera:

Código Javascript:

Ver original$('.tabla').on('click', '.eliminar', function() {
    alert($(this).val())
});

Y por favor usa el highlight para insertar código en los mensajes.

reynierlima · #12 (**permalink**) 21/10/2013, 08:15

Amigo gracias de verdad por tu tiempo ya funciono ya aprendí algo más. Te lo agradezco.

Saludos y muchas gracias. Dime como te puedo dar puntos si es que sirve para algo es que soy nuevo en este foro.