Formulario
Código HTML:
 <form name="prescor" id="prescor" method="post" action="#"> <table class="formulario"> <tr> <td>Cantidad</td> <td><input name="cant" type="text" id="cant" autocomplete="off" onKeyUp="subtotal()" pattern="[0-9]*." step="any"></td> <td>Artículo</td> <td><input name="idarti" type="text" id="idarti" autocomplete="off" ></td> </tr> <tr> <td>Precio</td> <td><input name="prec" id="prec" autocomplete="off" onKeyUp="subtotal()"></td> <td>Total</td> <td><input name="tota" type="text" id="tota" readonly></td> <td><input name="agregar" type="button" value="Agregar" onclick="fn_agregar()" /></td> </tr> </table> <table id="grilla" class="lista"> <thead> <tr> <th>Cant.</th> <th>Artículo</th> <th>Precio</th> <th>Subtotal</th> <th></th> </tr> </thead> <tbody> </tr> </tbody> <tfoot> <tr> <td colspan="2"><strong>No. Lineas:</strong> <span id="span_cantidad"></span></td> </tr> </tfoot> </table> </form>
Código:
  
 <script language="javascript" type="text/javascript" src="../js/jquery-191.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery-ui-1103.js"></script>
<script language="javascript" type="text/javascript">
function subtotal() { 
   var canti = document.prescor.cant.value; 
   var preci = document.prescor.prec.value;
   try{ 
       canti = (isNaN(parseFloat(canti)))? 0 : parseFloat(canti).toFixed(2); 
       preci = (isNaN(parseFloat(preci)))? 0 : parseFloat(preci).toFixed(2); 
       document.prescor.tota.value = parseFloat(preci*canti).toFixed(2); 
   } 
   catch(e) {} 
};
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	fn_eliminar();
	fn_cantidad();
});
			
function fn_cantidad(){
	var n = $("#grilla tbody").find("tr").length;
	$("#span_cantidad").text(n);
};
function fn_agregar() {
	cadena = "<tr>";
    cadena = cadena + "<td><input type='text' name='cantidad[]' value='" + $("#cant").val() + "' readonly size='1' required></td>";
    cadena = cadena + "<td><input type='text' name='idarticulo[]' value='" + $("#idarti").val() + "' readonly size='2' required></td>";
	cadena = cadena + "<td><input type='text' name='precio[]' value='" + $("#prec").val() + "' readonly size='4' required></td>";												
	cadena = cadena + "<td><input type='text' name='subtotal[]' value='" + $("#tota").val() + "' readonly size='7' required></td>";				
    cadena = cadena + "<td><a class='elimina'><img src='cancelar.png' width='16' height='16' title='Eliminar Fila'/></a></td>";
    $("#grilla tbody").append(cadena);
	document.getElementById("idarti").value="";
	document.getElementById("cant").value="";
	document.getElementById("prec").value="";
	document.getElementById("tota").value="";
    fn_eliminar();
	fn_cantidad();
};
          
function fn_eliminar()
	{
		$("a.elimina").click(function()
		{
        	id = $(this).parents("tr").find("td").eq(0).html();
            $(this).parents("tr").fadeOut("normal", function()
			{
            	$(this).remove();
				fn_cantidad();
            })
        });
	}
</script>
 


