I created a table that displays names, their nationality, and their occupation. The user browses for the Excel file, and then data is parsed to a table created with JS. There is three columns in the excel file, and I am trying to creating a fourth column for selecting rows, with a checkbox in each cell.
Code that opens the Excel File:
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvExcel">
</div>
<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]);
}
});
Here is the code that processes the Excel File. Do note that I have added a fourth column called "Selected", where the users can select a row.
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("Full Name");
row.append(headerCell);
var headerCell = $("<th />");
headerCell.html("Nationality");
row.append(headerCell);
var headerCell = $("<th />");
headerCell.html("Occupation");
row.append(headerCell);
var headerCell = $("<th />");
headerCell.html("Selected?");
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].Name);
row.append(cell);
cell = $("<td />");
cell.html(excelRows[i].Country);
row.append(cell);
cell = $("<td />");
cell.html(excelRows[i].Affiliation);
row.append(cell);
cell = $("<td />");
//STUCK HERE
row.append(cell);
}
dvExcel.html("");
dvExcel.append(table);
};
</script>
The part where I am stuck is how I can add a checkbox cell in each row. It's either the "selected" cell is blank, or I get this "appendChild is not a function". How can I do so?
Aucun commentaire:
Enregistrer un commentaire