Olá pessoal!
Estou tentando aprender mais sobre javascript e Jquery e estou empacado numa questão.
Consegui implantar numa página uma função que, le os dados de um arquivo excel e depois povoa uma table na tela sem inserção no banco de dados.
Porém, eu quero fazer duas coisas assim que for povoada a tabela:
- Contar a quantidade de linhas que foram inseridas na tabela pra saber quantos itens ele conseguiu extrair da planilha
- Colocar uma div logo abaixo da caixa de upload com a mensagem “Foram lidos XXX itens neste arquivo. Deseja Salvar no banco? (Botão para o processamento no banco de dados)”
Já tentei com função append, tentei deixar a div com um hidden e retirar esse hidden após carregar a função que lê o excel ,mas até agora não tive sucesso. Será que alguém consegue me dar um norte de que caminho devo tomar?
Muito obrigado!
<div hidden class="row div_quant justify-content-center">
<p>Foram lidos XXX itens neste arquivo. Deseja salvar no banco?</p>
<button>Salvar</button>
</div>
<script>
var ExcelToJSON = function () {
this.parseExcel = function (file) {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function (sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var productList = JSON.parse(JSON.stringify(XL_row_object));
var rows = $('#tblItems tbody');
// console.log(productList)
for (i = 0; i < productList.length; i++) {
var columns = Object.values(productList[i])
rows.append(`
<tr>
<td>${columns[0]}</td>
<td>${columns[1]}</td>
<td>${columns[2]}</td>
<td>${columns[3]}</td>
<td>${columns[4]}</td>
<td>${columns[5]}</td>
<td>${columns[6]}</td>
<td>${columns[7]}</td>
<td>${columns[8]}</td>
<td>${columns[9]}</td>
</tr>
`);
}
})
};
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
document.getElementById('fileupload').addEventListener('change', handleFileSelect, false);
</script>
Nesse caso, eu coloquei acima a div que preciso que apareça, e também o script JQuery que estou utilizando para ler os dados do excel.