(Javascript) Sumar columnas (o celdas cualquiera, o cualquier elemento) en tablas, grids, etc.
<script type="text/javascript">
var myIVAtotal = 0;
document.querySelectorAll(".cotRepIVAsum").forEach(
function(acell){
var cellvalue= parseFloat(acell.innerHTML);
if (!isNaN(cellvalue)) {myIVAtotal += cellvalue;}
}
);
document.getElementById('SumaIVA').innerHTML = myIVAtotal.toFixed(2);
</script>
En el caso en que se aplicó, la necesidad era sumar todas las celdas de una tabla producida por base de datos en Formidable, en una Single Entry View. Finalmente, pueden sumarse cualquier cantidad de elementos una vez rendereados en la página.
En el ejemplo, .cotRepIVAsum es el identificador de class de las celdas de la tabla o elementos que se quieran sumar (funciona con div, span, p, etc. cualquier html tag).
document.querySelectorAll(«.cotRepIVAsum»).forEach revisa cada elemento con la clase definida, parseFloat convierte los valores de las celdas (que vienen como texto en el html) a número con decimales. Luego el if(!isNan(cellvalue)) comprueba si es número, si es así, lo suma a myIVAtotal con myIVAtotal += cellvalue y finalmente lo sustituye en cualquier html con tag, en este casi en div id=»SumaIVA».
EJEMPLO CON ANOTACIONES:
<script type="text/javascript">
var myIVAtotal = 0; //variable para obtener el valor final
document.querySelectorAll(".cotRepIVAsum").forEach( //revisa todos los elementos con la clase deseada
function(acell){
var cellvalue= parseFloat(acell.innerHTML); //obtiene el valor de la celda revisada (parseFloat obtiene número con decimales, parseInt obtiene sólo enteros
if (!isNaN(cellvalue)) {myIVAtotal += cellvalue;} //checa si no es número, si lo es, procede a agregar el valor a la sumatoria total
}
);
document.getElementById('SumaIVA').innerHTML = myIVAtotal.toFixed(2); //despliega la sumatoria total en cualquier div con ese tag, toFixed(2) redondea a 2 decimales
</script>