Calcular un campo de forma tabular usando javascript

Hace algún tiempo atrás, les expliqué cómo calcular el valor de un campo a partir de otros dos utilizando javascript (lo pueden leer aquí).

A raíz de esto, han surgido una serie de solicitudes para que les explique como hacer lo mismo pero en una forma tabular.

Por esta razón, hoy les quiero dejar aquí la manera de hacerlo, no sin antes dejarles algunos detalles a considerar sobre el tema.

En primer lugar, los campos f01, f02 y f03 a que se hace referencia en esta publicación, son sensitivos a mayúsculas y minúsculas, por lo que se deben utilizar tal y como se hace aquí.

Segundo, estos campos corresponden a cada uno de los campos editables que contiene la forma tabular, contando de manera ordenada y de izquierda a derecha.

Habiendo dicho esto, aquí esta la forma de realizar el campo.

Supongamos que tenemos en la forma tabular tres campos: Cantidad, Precio y Total y se desea calcular la columna Total a como Cantidad multiplicada por el Precio.

Lo que debes hacer es:

1. Agregar en la propiedad Encabezado HTML de la página el siguiente código Javascript:

<script type="text/javascript"> function calcularTotal(pThis) { var vRow = pThis.id.substr(pThis.id.indexOf('_')+1); html_GetElement('f03_'+vRow).value = parseInt(html_GetElement('f01_'+vRow).value, 10) * parseInt(html_GetElement('f02_'+vRow).value, 10); } </script>

1 2 3 4 5 6 7 8 9

<script type="text/javascript"> function calcularTotal(pThis) { var vRow = pThis.id.substr(pThis.id.indexOf('_')+1); html_GetElement('f03_'+vRow).value =     parseInt(html_GetElement('f01_'+vRow).value, 10) *     parseInt(html_GetElement('f02_'+vRow).value, 10); } </script>

2. En la propiedad Atributos de elemento, del elemento Precio de la forma tabular, agregar lo siguiente:

onchange="calcularTotal(this);"

1	onchange="calcularTotal(this);"

Con esto, luego de ingresar el valor del campo Precio, se ejecutará el cálculo de la columna Total.

Espero que les sea de utilidad.