hi in my code do this
1. i have a form and the user can upload excel files.
2. i check if the file is excel
3. if the files is excel then be visible in html
4. then user can delete a line or change something
5. i have and search if the user want to find something
but i dont know how to do this i want all the changes from the html page to be saved to excel file in the desktop of user in real time
here is my code
1. i have a form and the user can upload excel files.
2. i check if the file is excel
3. if the files is excel then be visible in html
4. then user can delete a line or change something
5. i have and search if the user want to find something
but i dont know how to do this i want all the changes from the html page to be saved to excel file in the desktop of user in real time
here is my code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>UploadyourExcel</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<link rel="stylesheet" href="index.css">
<script>
$(function() {
$('#file-input').on('change', function(e) {
var file = e.target.files[0];
var filename = file.name;
var extension = filename.split('.').pop().toLowerCase();
if (extension != 'xlsx') {
$('#error-message').text('File must be an Excel file (.xlsx)');
$('#preview').empty();
$('#search-bar').hide();
return;
}
$('#error-message').empty();
var reader = new FileReader();
reader.onload = function(e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, { type: 'array' });
var sheet_name_list = workbook.SheetNames;
var html = XLSX.utils.sheet_to_html(workbook.Sheets[sheet_name_list[0]], {editable:true});
$('#preview').html(html);
$('#preview tr').each(function() {
$(this).append('<td><button class="delete-row" type="button" style="display:none">x</button></td>');
});
$('#preview tr').hover(function() {
$(this).find('.delete-row').show();
}, function() {
$(this).find('.delete-row').hide();
});
$('.delete-row').click(function() {
var row = $(this).closest('tr');
row.remove();
});
$('#preview td[contenteditable]').on('blur', function() {
var cell = $(this);
var value = cell.text();
var sheet = workbook.Sheets[sheet_name_list[0]];
var address = cell.attr('data-address');
sheet[address].v = value;
XLSX.writeFile(workbook, filename);
});
$('#search-bar').show();
$('#search-bar input[type="text"]').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#preview tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
};
reader.readAsArrayBuffer(file);
});
});
</script>
</head>
<body>
<h1>Ανέβασε το αρχείο σου:</h1>
<form>
<label for="file-input"></label>
<input type="file" id="file-input" accept=".xlsx">
</form>
<div id="error-message"></div>
<div id="search-bar" style="display:none">
<input type="text" placeholder="Αναζήτηση">
</div>
<div id="preview"></div>
</body>
