sum a column in an HTML Table NaN

[Wilson Galter]

Hi,I wounder if anyone could help?

 I'm stuck with this and I know that I'm close but need help to figure out how to debug this.

I have this table that gets values from a sheet to HTML page onLoad="reloadTable()"

 

Everything works, except when I try to sum a column and that's when I get the Sum Value = NaN

in my <div id="val"></div> instead of the calculation.

 I know that it works if I hard code the table on to the HTML file, not when it dynamically loads it from the sheet.

I have checked the formatting to see if I indeed have numbers

I've removed my table headers <th>

i've changed the CODE.GS script to getValues() instead of getDisplayValues()

Nothing works.

If I remove the parseInt() it will return a string of the numbers of column [2]

like so

Sum Value = 05816111120

This is the function that I'm having a problem with.

    function sum() {

            var table = document.getElementById("table1"), sumVal = 0;

            for(var i = 1; i < table.rows.length; i++)

            {

                sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);

            }

            document.getElementById("val").innerHTML = "Sum Value = " + sumVal;

            console.log(sumVal);

    }

 

table view

This is how my table gets loaded which works fine

<script>

function reloadTable() {

          google.script.run.withSuccessHandler( function (table) {

         document.getElementById("ParcelCurrentClientCurrentInvoice").innerHTML = table;// pass table data to HTML

         

setTimeout(sum,2000);// run func. to sum column 3 of loaded table after 2 seconds

         

}

).getTable();//get data table from sheet server side

 }

</script>

serverSide.GS

 function getTable() {

  var sheet = SpreadsheetApp.openById("1ZawJJjI-Xhfgsdfgdfgsdfgsdfgsdfg").getSheetByName("RequisicaoConsolidationList");

   //var lastRow = sheet.getLastRow();

   var lastRow = getLastPopulatedRow(sheet); 

  var data = sheet.getRange(4,7,lastRow,4).getDisplayValues();

  var table = "<table id='table1' border='0' ><tr> <th>ID</th> <th>DATA</th> <th>QTD</th> <th>VALOR</th><th><input type='checkbox' name='check-All' onchange='checkAlltable1()' ></th> </tr>";

   //<td><input type='checkbox' /></td>

  for( var i=0; i<data.length; i++ ) {

    table = table.concat("<tr>");

    for( var j=0; j<data[0].length; j++ ) {

      table = table.concat("<td>");

      table = table.concat(data[i][j].toString());

      table = table.concat("</td>");

    }  

  

    table = table.concat("<td><input type='checkbox' name='check-tab1'></td></tr>");

     }

     table= table.concat("</table>");

  Logger.log(table);

  return table;

}

[Wilson Galter]

ok. Problem solved.

My table had two additional blank rows causing the NaN output. So I worked around it by subtracting the two additional rows

like so:

var data = sheet.getRange(4,7,lastRow-2,4).getDisplayValues();