Start creating table

This commit is contained in:
hodasemi 2018-10-21 18:03:11 +02:00
parent acc42e8b46
commit 4c0962359d
3 changed files with 26 additions and 5 deletions

View file

@ -24,4 +24,8 @@
.topnav p.active { .topnav p.active {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
}
.table {
} }

View file

@ -21,7 +21,17 @@
</ul> </ul>
</nav> </nav>
<input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv"> <!--
<input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv" />
-->
<table id="table_bla"></table>
<script>
handleFile("world_data_v1.csv")
</script>
</body> </body>
</html> </html>

15
main.js
View file

@ -1,11 +1,12 @@
// Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/ // Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
// Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/ // Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
function handleFiles(files) { function handleFile(path) {
// Check for the various File API support. // Check for the various File API support.
if (window.FileReader) { if (window.FileReader) {
// FileReader are supported. // FileReader are supported.
getAsText(files[0]);
getAsText(file);
} else { } else {
alert('FileReader are not supported in this browser.'); alert('FileReader are not supported in this browser.');
} }
@ -13,8 +14,13 @@ function handleFiles(files) {
function getAsText(fileToRead) { function getAsText(fileToRead) {
var reader = new FileReader(); var reader = new FileReader();
// Read file into memory as UTF-8
// Read file into memory as UTF-8
// TODO: fileToRead is the path to the file -> create a file handle
reader.readAsText(fileToRead); reader.readAsText(fileToRead);
// Handle errors load // Handle errors load
reader.onload = loadHandler; reader.onload = loadHandler;
reader.onerror = errorHandler; reader.onerror = errorHandler;
@ -44,7 +50,8 @@ function processData(csv) {
} }
table += "</table>"; table += "</table>";
$("#parsed_csv_list").html(table);
document.getElementById('table_bla').innerHTML = table;
} }
function errorHandler(evt) { function errorHandler(evt) {