jquery mostrar contenido entre dos trs

Legolas_Bilbao · #1 (**permalink**) 25/01/2010, 03:07

Tengo una tabla y quiero que al pulsar en una imagen se abrá un desplegable entre el tr donde está la imagen y el siguiente tr.

Se mostrar divs ocultos pero no se como hacer para añadir una nueva tr.

un saludo.

Dany_s · #2 (**permalink**) 25/01/2010, 15:41

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function () {
            $("tr:odd").css("background-color", "#bbbbff");

            $('img').one('click', function (){
                fila = $('<tr class="nuevaTr"><td colspan="3">nuevo tr</td></tr>');
                $(this).parents('tr').after(fila);
            });
            
        });
        </script>
        <style>
            .nuevaTr{background-color:#ccc}
        </style>
    </head>
<body>
    <table border="0">
            <tr>
                <td><img src="imagen.gif" height="20" width="20"></td>
                <td>asd</td>
                <td>asd</td>
            </tr>
            <tr>
                <td><img src="imagen.gif" height="20" width="20"></td>
                <td>asd</td>
                <td>asd</td>
            </tr>
            <tr>
                <td><img src="imagen.gif" height="20" width="20"></td>
                <td>asd</td>
                <td>asd</td>
            </tr>
            <tr>
                <td><img src="imagen.gif" height="20" width="20"></td>
                <td>asd</td>
                <td>asd</td>
            </tr>
            <tr>
                <td><img src="imagen.gif" height="20" width="20"></td>
                <td>asd</td>
                <td>asd</td>
            </tr>
    </table>
</body>
</html>

hector2c · #3 (**permalink**) 26/01/2010, 10:51

eXelente ejemplo Dany_s, aqui doy un agregado mas...

Código HTML:

<script type="text/javascript">
$( function () {
	$("tr:odd").css("background-color", "#bbbbff");

	$("img").toggle(
		function () {
			fila = $('<tr class="nuevaTr"><td colspan="3">nuevo tr</td></tr>');
			$(this).parents('tr').after(fila);
		},
		function () {
			$(this).parents('tr').next('tr').remove();
		}
	);
	
});
</script>
<style>
	.nuevaTr{background-color:#ccc}
	img{ cursor:pointer;}
</style>

Legolas_Bilbao · #4 (**permalink**) 27/01/2010, 02:52

Muchas gracias, ahora voy a cacharrear con lo que me habeís dado para cargar unos valores que traigo mediante ajax.

muchas gracias

Con vuestro código y revisando mis conocimientos escasos de ajax.

Sería algo tal que así no?. No puedo probarlo ya que estoy pruebas en un pc sin tecnologias de servidor

Código PHP:

  $( function () {

$.ajax({

   type: "POST",

   url: "xxx.php",

   data: "a=1&b=d",

   success: function(msg){

     $("tr:odd").css("background-color", "#bbbbff");

 
    $("img").toggle(

        function () {

            fila = $('<tr class="nuevaTr"><td colspan="3">nuevo tr</td></tr>');

            $(this).parents('tr').after(fila);

        },

        function () {

            $(this).parents('tr').next('tr').remove();

        }

    );

   }

 });

 
    

    

});

hector2c · #5 (**permalink**) 27/01/2010, 07:28

mmmmm, imagina que tienes 2 ficheros:

- uno donde muestras la tabla y tienes el código jquery
- y otro donde haces la peticion ajax

el primer fichero seria el siguiente:

Código PHP:

  <script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$( function () {

    $("tr:odd").css("background-color", "#bbbbff");

 
    $("img").toggle(

        function () {

            img = $(this);

            ide = img.parents('tr').attr('id');

            ide = ide.substr(3,1);

            $.ajax({

                url: 'contenido.php',

                data: 'ide=' + ide,

                type: 'post',

                success: function(data){

                    fila = $('<tr class="nuevaTr"><td colspan="3">' + data + '</td></tr>');

                    img.parents('tr').after(fila);

                }

            })

        },

        function () {

            $(this).parents('tr').next('tr').remove();

        }

    );

    

});

</script>

<style>

    .nuevaTr{background-color:#ccc}

    img{ cursor:pointer;}

</style>

Código HTML:

<table border="0">
    <tr id="tr_1">
        <td><img src="imagen.gif" height="20" width="20"></td>
        <td>asd</td>
        <td>asd</td>
    </tr>
    <tr id="tr_2">
        <td><img src="imagen.gif" height="20" width="20"></td>
        <td>asd</td>
        <td>asd</td>
    </tr>
    <tr id="tr_3">
        <td><img src="imagen.gif" height="20" width="20"></td>
        <td>asd</td>
        <td>asd</td>
    </tr>
    <tr id="tr_4">
        <td><img src="imagen.gif" height="20" width="20"></td>
        <td>asd</td>
        <td>asd</td>
    </tr>
    <tr id="tr_5">
        <td><img src="imagen.gif" height="20" width="20"></td>
        <td>asd</td>
        <td>asd</td>
    </tr>
</table>

y ahora el fichero que hace el proceso del contenido:

Código PHP:

 
Contenido del id: <?=$_POST['ide']?>

Si te das cuenta, lo que hago para diferencias cada fila es agregarle un id, osea un tr_5, tr_6, tr_6, etc, y obtengo el ide, otros suelen usar una columna, bueno, es cosa de gustos...

Legolas_Bilbao · #6 (**permalink**) 27/01/2010, 08:28

Gracias Hector, me has aclarado donde situar el codigo ajax

Legolas_Bilbao · #7 (**permalink**) 28/01/2010, 09:50

Siguiendo con el código, quiero cambiar la imagen una vez presionas sobre ella

Código HTML:

 $("img").toggle( 
function () { 
 var id = $(this).attr('id');
 $(id).attr("src","cerrar.jpeg");
...

el id está en la imagen y poniendo un alert (id) saca el valor correcto.

<img src="lupa.jpeg" id="1" class="imagen" height="15px">

Pero no me funciona :(

hector2c · #8 (**permalink**) 28/01/2010, 10:53

hola nuevamente!!!; pues, obtienes el ID correctamente con:

Código PHP:

  var id = $(this).attr('id');

pero el problema es que imagina que el id = 4, entonces, tendrias esto en la siguietne linea

Código PHP:

  $(4).attr("src","cerrar.jpeg");

lo mas adecuado seria agregar estop:

Código PHP:

  $("#" + id).attr("src","cerrar.jpeg");

para asi obtener

Código PHP:

  $("#4").attr("src","cerrar.jpeg");

te recomiendo no usar números en lo que es ID, tal vez tengas problemas, lueguo...

ahi te va un ejemplillo

Código HTML:

<script language="javascript" type="text/javascript" src="extras/js/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("img").click(function(){
			var id2 = $(this).attr('id');
			alert("el id es " + id2);
			$(this).attr("src","cerrar.jpeg");
		});
	});
</script>
<img src="conejo.jpg" id="1">
<img src="conejo.jpg" id="2">
<img src="conejo.jpg" id="3">

Legolas_Bilbao · #9 (**permalink**) 28/01/2010, 11:00

Muchas gracias Hector, era mas sencillo.

¿Porque no recomiendas el uso de ids numericos? Simple curiosidad

hector2c · #10 (**permalink**) 28/01/2010, 11:13

mmmmm, pues, algun día llegara el caso en que tengas que mostrar por ejemplo 2 tablas con distintos datos, y pues, sabes que los id suelen repetirse, por ejemplo:

tabla productos
1. leche
2. azucar
3. cafe

tabla cliente
1. hector2c
2. legolas_bilbao

jajaja, imagina que se te de el caso de agregar esas 2 tablas en una sola página, pues, podrias tener problemas, aparte que "a mi modo de pensar", es un habito de desarrollo, no usar números en id, imagina basic, no te permite usar variables con nombre numéricos, javascript igual, tambien php...

bueno, es mas que todo costumbre...

en mi caso usaria un... hmmm...

tabla productos
pr_1. leche
pr_2. azucar
pr_3. cafe

tabla cliente
cl_1. hector2c
cl_2. legolas_bilbao

logicamente, las tablas de tu bd, son de valor numérico, en caso desees obtener el número, simplemente haces un substr() para quitar el pr_ y el cl_ y hacer tu consulta... :P

Legolas_Bilbao · #11 (**permalink**) 28/01/2010, 11:17

Ok, vamos es una apreción mas enfocada a la base de datos.

Yo pongo directamente el id por comodidad para hacer las consultas aunque en el caso que estoy manejando creo que voy a necesitar otra variable.

muchas gracias por todo Hector. Seguire cacharreando con jquery