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.
HTML Code:
<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);
};
The headers for the second table are here, written in HTML:
HTML Code:
<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>
Here is the copy table function:
Code:
// 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 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.
HTML code:
HTML Code:
<div>
<button class="sum" onclick="getSum()">Get Sum</button>
</div>
Here is the JS code I have so far:
Code:
//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);
}
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?