problema con operaciones datos dinamicos

[Osvaldo_Jacobo]

logre hacerlo funcionar poniendo el class en la fila de la tabla en lugar de divs pero ahora mi problema es que al cargar la pagina los totales me aparecen en 0 y se actualizan hasta que pongo el foco en alguno de los textbox y presiono una tecla

Código Javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $(".grupo").keyup(function()
        {
            var importe=$(this).find("input[name=importe]").val();
            var cantidad=$(this).find("input[name=cantidad]").val();
            $(this).find("[class=total]").html(parseFloat(importe)*parseFloat(cantidad));
 
            // calculamos el total de todos los grupos
            var total=0;
            $(".grupo .total").each(function(){
                total=total+parseFloat($(this).html());
            })
            $(".total .total").html(total);
        });
    });
    </script>
 

Código HTML:

<table width="90%" border="1" cellspacing="0">
  <tr>
    <th scope="col">nombre</th>
    <th scope="col">cantidad</th>
    <th scope="col">precio</th>
    <th scope="col">Subtotal</th>
  </tr>
    <?php do { ?>
  <tr class="grupo">
      <td><?php echo $row_carrito['nombre_producto']; ?></td>
      <td><input type="text" name="cantidad" value="<?php echo $row_carrito['cantidad']; ?>" /></td>
      <td><input type="text" name="importe" value="<?php echo $row_carrito['precio']; ?>" /></td>
      <td><span class="total">0</span></td>
    </tr>
    <?php } while ($row_carrito = mysql_fetch_assoc($carrito));  ?>
    <tr class="total">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>total:</td>
      <td class="total"><span class="total">0</span></td>
    </tr>
    </div>
</table>
 

asi quedo el codigo hasta el momento