JQuery - Manejar evento sobre una fila para extraer el valor de un campo

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Alberto (6 intervenciones) el 15/11/2015 01:37:29

Hola, acabo de registrarme para haceros una pregunta, porque estoy ya bastante estancado con este tema... a ver si podeis echarme un cable:

Tengo una tabla en la cual genero dinámicamente las filas con los registros de una tabla llamada OFERTAS. Hasta aquí bien, el problema es que cuando borro una fila quiero almacenar el valor de la columna ID para luego usarlo para borrar el registro de la base de datos.

$(document).ready(function(){

	var nFila;

	var url = "empresas-anuncios_model.php";

	$.getJSON(url, function(ofertas){

		$.each(ofertas, function(i, oferta){

			nFila = "<tr class='anuncios-fila'><td class='oferta-id' name='id'>"+oferta.id+"</td><td name='titulo'>"+oferta.titulo+"</td><td name='area'>"+oferta.area+"</td><td name='n_suscritos'>"+oferta.n_suscritos+"</td><td name='n_selec'>"+oferta.n_selec+"</td> 	<td><input class='btn_editar_oferta icon-size' type='image' name='oferta_edit' src='images/oferta_edit.png' style='width: 30px; height: 30px'></td>		<td><input class='btn_borrar_oferta icon-size' type='image' name='oferta_delete' src='images/oferta_supr.png' style='width: 25px; height: 25px'></td></tr>";

			$('.tabla_ofertas').append(nFila);

});

		$('.btn_borrar_oferta ').click(function(){

			var a = $('.oferta-id').text();

			console.log(a);

			//var a = $(this).children('td:first').val();

			//console.log($(this).('.anuncios-fila'));

			//eliminarOferta($(this).('.anuncios-fila'));

});

Eso es lo más cerca que he estado de sacar algún valor, porque en la consola me aparecen todos los ID de todas las filas de ésta manera:

123456 (cada número corresponde a una fila)

Supongo que ahora lo que necesito es referenciar correctamente la fila usando this de alguna manera, pero no doy con la fórmula...

Gracias de antemano, un saludo.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 293

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Xavi (14 intervenciones) el 15/11/2015 20:02:58

Hola Alberto, tu problema es que estas haciendo referencia a todos los ids...

var a = $('.oferta-id').text();

a contendrá todos los textos de todos los objetos con la clase oferta-id

para que solo te coja el que ha generado el evento click(), tienes que utilizar this... algo así (no se muy bien la estructura de tu tabla...:

var a = $(this).parent().text();

como el evento esta en un botón, tiene que ir al elemento que dispone el id mediante el DOM de la página...

No se si me he explicado bien... coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Alberto (6 intervenciones) el 16/11/2015 00:51:31

Gracias por tu respuesta Xavi. En efecto, se que el problema esta ahí, lo que pasa que no doy con el código adecuado para escalar por el DOM hasta el elemento que quiero con jQuery. Sabía que debía usar el this pero no sabía como implementarlo.

No obstante, he probado a ponerlo con:

var a = $(this).parent().text();

			console.log(a);

pero en la consola no me sale nada.

Le he añadido lo siguiente:

var a = $(this).parent().parent().text();

			console.log(' "'+a+'" ');

y me muestra los valores de todas las columnas, de la siguiente forma:

"3Se busca programadorInformatica00 "

entonces creí que insertando el nombre de la clase -$(this).parent().parent('.oferta-id").text- me mostraría solo la primera columna, pero no, sólo me muestra: "".

He probado tambien:

var a = $(this).parent().parent("td[name=id]").text();

			console.log(' "'+a+'" ');

Y me muestra esto igualmente: ""

Ya no sé que más probar... La tabla cada fila se genera así:

nFila = <tr class='anuncios-fila'><td class='oferta-id' name='id'>"+oferta.id+"</td><td name='titulo'>"+oferta.titulo+"</td><td name='area'>"+oferta.area+"</td><td name='n_suscritos'>"+oferta.n_suscritos+"</td><td name='n_selec'>"+oferta.n_selec+"</td> 	<td><input class='btn_editar_oferta icon-size' type='image' name='oferta_edit' src='images/oferta_edit.png' style='width: 30px; height: 30px'></td>		<td><input class='btn_borrar_oferta icon-size' type='image' name='oferta_delete' src='images/oferta_supr.png' style='width: 25px; height: 25px'></td></tr>";

$('.tabla_ofertas').append(nFila);

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por xve (673 intervenciones) el 16/11/2015 08:48:14

Hola Alberto, aqui te he preparado un ejemplo con tu formato de tabla...

<!DOCTYPE html>

<html lang="es">

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

		$('.btn_borrar_oferta ').click(function(){

			alert($(this).parents("table").find(".oferta-id").text());

});

});

	</script>

</head>

<body>

	<table>

		<tr class='anuncios-fila'>

			<td class='oferta-id' name='id'>125</td>

			<td name='titulo'>oferta.titulo</td><td name='area'>oferta.area</td>

			<td name='n_suscritos'>oferta.n_suscritos</td>

			<td name='n_selec'>oferta.n_selec</td>

			<td><input class='btn_editar_oferta icon-size' type='image' name='oferta_edit' value="editar"></td>

			<td><input class='btn_borrar_oferta icon-size' type='image' name='oferta_delete' value="borrar" id="x"></td>

		</tr>

	</table>

</body>

</html>

Coméntanos, si te sirve ok?

Valora esta respuesta

Comentar

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Alberto (6 intervenciones) el 16/11/2015 21:48:58

Muchisimas gracias por tu respuesta xve.

He probado tu ejemplo y no funciona, no me muestra nada. Estoy muy bloqueado con esto...

P.D: Miento, lo había modificado así:

var a = $(this).parent(".tabla_ofertas").find(".oferta-id").text();

Si pongo exactamente lo que tú has puesto, es decir:

var a = $(this).parents("table").find(".oferta-id").text();

Me muestra todas las ids concatenadas, de la siguiente forma:

"123456"

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por xve (673 intervenciones) el 17/11/2015 08:46:09

Como que no funciona!!!, si lo copias tal cual en una pagina html, y pulsa sobre el boton "borrar", te tiene que mostrar el id!!!!

Sobre lo que comentas, que muestra todos los id's, tienes toda la razon... cambia la linea:

var a = $(this).parents("table").find(".oferta-id").text();

por:

var a = $(this).parents("tr").find(".oferta-id").text();

Coméntanos,ok?

Valora esta respuesta

Comentar

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Alberto (6 intervenciones) el 17/11/2015 09:26:48

En cuanto llegue a casa lo pruebo, me da en la nariz que así si que va a funcionar correctamente. Muchas gracias.

Valora esta respuesta

Comentar

Manejar evento sobre una fila para extraer el valor de un campo

Publicado por Alberto (6 intervenciones) el 17/11/2015 14:50:04

Perfecto!!! Muchisimas gracias por vuestra ayuda :)

Valora esta respuesta

Comentar

Ajax no carga bien archivo HTML con Flexslider

Opciones de interval y transitionTime no puedo cambiar valores por defecto.