Foros del Web - Ver Mensaje Individual - mostrar y ocultar fila de tabla con jquery

Reedyseth · #8 (**permalink**) 02/07/2013, 15:26

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:

Ver original<!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>