Spaces:
Runtime error
Runtime error
File size: 2,451 Bytes
43317b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV File Viewer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Upload and View CSV File</h2>
<div class="form-group">
<input type="file" id="fileInput" class="form-control-file" accept=".csv">
</div>
<table id="csvTable" class="table table-bordered mt-4">
<thead>
<tr id="tableHeader"></tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file && file.type.match('text/csv')) {
const reader = new FileReader();
reader.onload = function(e) {
const text = e.target.result;
displayCSVData(text);
};
reader.readAsText(file);
} else {
alert('Please upload a valid CSV file.');
}
});
function displayCSVData(csvText) {
const rows = csvText.split('\n');
const headerRow = rows[0].split(',');
const headerElement = document.getElementById('tableHeader');
headerElement.innerHTML = '';
headerRow.forEach(header => {
const th = document.createElement('th');
th.textContent = header.trim();
headerElement.appendChild(th);
});
const bodyElement = document.getElementById('tableBody');
bodyElement.innerHTML = '';
rows.slice(1).forEach(row => {
if (row.trim() !== '') {
const rowElement = document.createElement('tr');
const cells = row.split(',');
cells.forEach(cell => {
const td = document.createElement('td');
td.textContent = cell.trim();
rowElement.appendChild(td);
});
bodyElement.appendChild(rowElement);
}
});
}
</script>
</body>
</html>
|