JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page-wrapper">
NÂş <input type="text" id="rank" />
Select a .csv file:
<input type="file" id="fileInput">
<pre id="fileDisplayArea"><pre>
</div>
CSS
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
}
#page-wrapper {
width: 600px;
background: #FFF;
padding: 1em;
margin: 1em auto;
min-height: 300px;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
h1 {
margin-top: 0;
}
img {
max-width: 100%;
}
#fileDisplayArea {
margin-top: 2em;
width: 100%;
overflow-x: auto;
}
td{
border:1px solid black;
padding:5px;
}
}
JavaScript
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
//Convert .csv to table html
var data = reader.result;
var rank = $("#rank").val();
if(rank == ""){
alert("digit rank number");
fileInput.value = "";
}
else{
data = data.replace(/\s/, " #");
data = data.replace(/([0-9]\s)/g, "$1#");
var lines = data.split(";"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>" + lines[i].slice(0,-1).split(",").join("</td><td>") + "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var valuefinal = $(output).find('tr').filter(function(){
return $(this).children('td').eq(0).text() == rank;
});
$('#fileDisplayArea').append(valuefinal);
}
}
reader.readAsBinaryString(file);
});