Spaces:
Runtime error
Runtime error
| <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> | |