Cannot read property 'length' of null at getSum

[master-pc]

I am going to calculate total sales from a dynamically created table with JavaScript. I have two tables. Data from an Excel file are parsed into the first table. The second table has some data rows copied from the first table. There is a checkbox column in the first table that copies selected rows into the second table.

This is the function that creates the tale dynamically with JS.

<script type="text/javascript">
    $("body").on("click", "#upload", function () {
        //Reference the FileUpload element.
        var fileUpload = $("#fileUpload")[0];

      
        var reader = new FileReader();

        //For Browsers other than IE.
        if (reader.readAsBinaryString) {
                reader.onload = function (e) {
                        ProcessExcel(e.target.result);
                    };
             reader.readAsBinaryString(fileUpload.files[0]);
             } else {
                    //For IE Browser.
                    reader.onload = function (e) {
                        var data = "";
                        var bytes = new Uint8Array(e.target.result);
                        for (var i = 0; i < bytes.byteLength; i++) {
                            data += String.fromCharCode(bytes[I]);
                        }
                        ProcessExcel(data);
                    };
                    reader.readAsArrayBuffer(fileUpload.files[0]);
                }
           
    });
    function ProcessExcel(data) {
        var dvExcel = $("#dvExcel");
        //Clear the table.
        $("#dvExcel tr").remove();
        //Read the Excel File data.
        var workbook = XLSX.read(data, {
            type: 'binary'
        });

        //Fetch the name of First Sheet.
        var firstSheet = workbook.SheetNames[0];

        //Read all rows from First Sheet into an JSON array.
        var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

        //Create a HTML Table element.
var table = $("<table />");
        table[0].border = "1";

        //Add the header row.
        var row = $(table[0].insertRow(-1));

        //Add the header cells.                                    

var headerCell = $("<th />");
        headerCell.html("Product Name");
        row.append(headerCell);

var headerCell = $("<th />");
        headerCell.html("Sales");
        row.append(headerCell);

        //Add the data rows from Excel file.
        for (var i = 0; i < excelRows.length; i++) {
            //Add the data row.
            var row = $(table[0].insertRow(-1));

            //Add the data cells.
var cell = $("<td />");
            cell.html(excelRows[I].ProductName);
            row.append(cell);

cell = $("<td />");
            cell.html(excelRows[I].Sales);
            row.append(cell);


cell = $("<td />");
            var selectedCB=document.createElement('input');
            selectedCB.type="checkbox";
            selectedCB.id = "chk" ;
            selectedCB.name = "chk" ;
            cell.html(selectedCB);
            row.append(cell);
        }

       
        dvExcel.html("");
        dvExcel.append(table);
    };[/I][/I][/I]

The headers for the second table are here, written in HTML:

[I][I][I]<div id="endingHeader">
<div>
<h2>Selected Rows</h2>
</div>
<div>
<table class="secondTable">
<tr>
<th>Product name</th>
<th>Daily Sales</th>
</tr>
               
</table>
</div>
</div>[/I][/I][/I]

Here is the copy table function:

[I][I][I]// Copying Function

$(function() {
       
        $(document).on("click",".transferrows", function() {
            $("#secondTable tr").remove();
            var getselectedValues=$("#dvExcel input:checked").parents("tr").clone().appendTo(".secondTable tbody").add(getselectedValues)
        })
    })[/I][/I][/I]

I have a button that would select a specific column, and then calculate the sum of the total sales in the selected column, which is column 2.

[I][I][I]<div>
<button class="sum" onclick="getSum()">Get Sum</button>
</div>[/I][/I][/I]

Here is the JS code I have so far:

[I][I][I]//This function takes the data from the first column and then calcualtes the sum.
function getSum()
{
    var table=document.getElementById("secondTable"), sumVal=0;
    for(var i=1;i<table.length;i++)             //<--- The offending line here
    {
        sumVal=sumVal+parseInt(table.rows[I].cells[1].innerHTML);
    }
    console.log(sumVal);
}[/I][/I][/I][/I]

That was where I hit a problem. It's called:

main.html:306 Uncaught TypeError: Cannot read property 'length' of null at getSum

What is wrong with my code? How can I Fix this?