Hey there, I'm diving into the world of website development for the first time, just getting started a couple of days back.
Although I have some experience with Python and C# programming, I'm facing challenges in generating an HTML table using JS and applying Bootstrap CSS styling to it.
Unfortunately, I can't seem to make it work.
This is what I'm currently getting:
https://i.sstatic.net/dSRDN.png
And this is what I'm aiming for:
https://i.sstatic.net/GZ1S3.png
My goal is to achieve a style similar to this (simplified from: w3schools)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a404542446a4f524b475a464f04494547">[email protected]</a></td>
</tr>
</table>
</div>
</body>
</html>
This is how my current HTML page structure looks:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
</html>
Also, here's my JavaScript function that processes the file input and generates the HTML table:
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
myTable.appendChild(row);
}
}
myReader.readAsText(theFile);
}
return false;
}
The CSV data file I'm loading has the following content:
TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144
And this is the HTML table generated after processing the file:
<table id="myTable" class="table">
<tr>
<th>TestA</th>
<th>TestB</th>
<th>TestC</th>
<th>TestD</th>
</tr>
<tr>
<td>Alpha</td>
<td>0.551608445</td>
<td>0.807554763</td>
<td>54.8608682</td>
</tr>
<tr>
<td>Beta</td>
<td>0.191220409</td>
<td>0.279946678</td>
<td>57.55254144</td>
</tr>
<tr>
<td></td>
</tr>
</table>