Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/06/2013, 13:30
evoarte
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 22 años, 3 meses
Puntos: 2
mostrar y ocultar fila de tabla con jquery

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

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.             $("#report tr:odd").addClass("odd");
  3.             $("#report tr:not(.odd)").hide();
  4.             $("#report tr:first-child").show();
  5.            
  6.             $("#report tr.odd").click(function(){
  7.                 $(this).next("tr").toggle();
  8.                 $(this).find(".arrow").toggleClass("up");
  9.             });
  10.             //$("#report").jExpand();

Código HTML:
Ver original
  1. <table id="report">
  2.         <tr>
  3.             <th>Codigo</th>
  4.             <th>Descripción</th>
  5.             <th>Precio</th>
  6.             <th>Unidad</th>
  7.             <th></th>
  8.             <th></th>
  9.         </tr>
  10.         <tr>
  11.             <td>D35AC010</td>
  12.             <td>PINTURA PLÁSTICA COLOR</td>
  13.             <td>5,38</td>
  14.             <td>m2</td>
  15.             <td><div class="arrow"></div></td>
  16.             <td>
  17.                   <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>            
  18.             </td>
  19.         </tr>
  20.         <tr>
  21.             <td colspan="6">
  22.                 <h4>Additional information</h4>
  23.                     m². Pintura plástica color lisa PROCOLOR mix o similar en paramentos verticales y horizontales, lavable dos manos, i/lijado y emplastecido.
  24.                 </td>
  25.         </tr>
  26.     </table>

gracias por la ayuda.

un saludo,
josé carlos.