mostrar y ocultar fila de tabla con jquery

[evoarte]

hola, buenas tardes a todos,


¿Cómo podría modificar para que en lugar de desplegar pulsando sobre cualquier lugar de la fila, solo desplegar la fila oculta cuando se pulsa sobre la celda que contiene la imagen class="arrow"?

Código CSS:

body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report h4 { margin:0px; padding:0px;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE; color:#000; padding:7px 15px; }
        #report tr.odd td { background:#fff; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
 

Código Javascript:

$(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
 

Código HTML:

<table id="report">
        <tr>
            <th>Codigo</th>
            <th>Descripción</th>
            <th>Precio</th>
            <th>Unidad</th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td>D35AC010</td>
            <td>PINTURA PLÁSTICA COLOR</td>
            <td>5,38</td>
            <td>m2</td>
            <td><div class="arrow"></div></td>
            <td>
                  <a href="#" onclick="javascript:agregarPartida('D35AC010','PINTURA PLÁSTICA COLOR','5,38','m²');"><img id="apartida0" src="http://www.presupueston.com/images/precios/apartida.png"></a>            
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <h4>Additional information</h4>
                    m². Pintura plástica color lisa PROCOLOR mix o similar en paramentos verticales y horizontales, lavable dos manos, i/lijado y emplastecido.
                </td>
        </tr>
    </table>
 

gracias por la ayuda.

un saludo,
josé carlos.

[Reedyseth]

Que tal evoarte,

Solo tienes que modificar este código para que funcione al darle solo click a la flecha

Código Javascript:

$("#report tr.odd div.arrow").click(function(){
       $(this).parent().parent().next("tr").toggle();
       $(this).parent().find(".arrow").toggleClass("up");
});
 

La dirección que pasaste de la imagen no la encuentra. Asegurate que este el archivo ahí.

Saludos

[evoarte]

funciona OK, perfecto.
gracias.

[evoarte]

no se si es pedir demasido,

¿se podría hacer la llamada desde la celda con class="arrow" a través de un enlace?

(el script estaba hecho para que sobre la fila tuviera cursor:pointer, pero como he incluido 2 acciones, una la de desplegar la información, y otra la de agregar la información a otro formulario, parece confuso, y quitando cursor:pointer de la fila no se activa el cursor en la celda que despliega la información, aunque hace la función de desplegar.

Una solución es aplicar a esa celda con class="arrow" un estilo cursor:pointer y entonces se activa el cursor, pero:

¿se podría hacer la llamada desde la celda con class="arrow" a través de un enlace?

un saludo,
josé carlos.

[Reedyseth]

A ver dejame veo si te entendi, quieres que se desplique la información a través de un enlace en vez de que le den click en la celda ?

Pregunta:

¿Qué te parece en vez de un enlace un checkbox?

[evoarte]

hola,

debería ser un enlace, por que este tiene una imagen.

un saludo,
josé carlos.

[Reedyseth]

Supongo que la imagen la quieres para que te muestre tus imagenes de las flechas. Esas imagenes se las puedes poner a cualquier elemento, podemos hasta ponerlas en un div.

[Reedyseth]

Mira aquí hice un ejemplo para ver si se amplía la idea

http://behstant.com/tutorials/exampl...jQuery_V2.html

Y el código fuente cambio a esto:

Código HTML:

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery load with content and effect.</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
                $("#report tr:odd").addClass("odd");
                $("#report tr:not(.odd)").hide();
                $("#report tr:first-child").show();
                // código anterior
                /*$("#report tr.odd div.arrow").click(function(){
                    $(this).parent().parent().next("tr").toggle();
                    $(this).parent().find(".arrow").toggleClass("up");
                });*/
 
                $('.arrow').toggle(function() {
                    $(this).removeClass('arrow-plus');
                    $(this).addClass('arrow-minus');
                    $('#report tr:eq(2)').show();
                },function() {
                    $(this).removeClass('arrow-minus');
                    $(this).addClass('arrow-plus');
                    $('#report tr:eq(2)').hide();
                });
            });
        </script>
        <style type="text/css">
            body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
            #report { border-collapse:collapse;}
            #report h4 { margin:0px; padding:0px;}
            #report img { float:right;}
            #report ul { margin:10px 0 10px 40px; padding:0px;}
            #report th { background:#7CB8E2; color:#fff; padding:7px 15px; text-align:left;}
            #report td { background:#C7DDEE; color:#000; padding:7px 15px; }
            #report tr.odd td { background:#fff; cursor:pointer; }
            #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;background-color: #9E0AAF;}
            #report div.up { background-position:0px 0px;}
            div.iconset-01 a{ background-image: url('http://img9.imageshack.us/img9/4589/6qj.png'); background-repeat: no-repeat;}
            .arrow-plus {background-position: 0px 0px; width:30px;height:30px;display: block;margin:5px 0;}
            .arrow-minus {background-position: -40px 0px; width:30px;height:30px;display: block;margin:5px 0;}
        </style>
    </head>
    <body>
        <div class="iconset-01">
            <a class="arrow arrow-plus" href="#"></a>
        </div>
        <table id="report">
            <tr>
                <th>Codigo</th>
                <th>Descripción</th>
                <th>Precio</th>
                <th>Unidad</th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td>D35AC010</td>
                <td>PINTURA PLÁSTICA COLOR</td>
                <td>5,38</td>
                <td>m2</td>
                <td><div class="arrow"></div></td>
                <td>
                      <a href="#" onclick="javascript:agregarPartida('D35AC010','PINTURA PLÁSTICA COLOR','5,38','m²');"><img id="apartida0" src="http://www.presupueston.com/images/precios/apartida.png"></a>
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    <h4>Additional information</h4>
                        m². Pintura plástica color lisa PROCOLOR mix o similar en paramentos verticales y horizontales, lavable dos manos, i/lijado y emplastecido.
                    </td>
            </tr>
        </table>
    </body>
</html>
 

[evoarte]

buenos días, voy a probarlo.
gracias.