CSV to table for big data (RapidMiner Challenge)

by Adambasszer

HTML

<input type="file" id="file"></input>
	<input type="checkbox" id="chBox" checked>Infinite loop
	<div id="tableDiv"></div>
	<h1 id="loading">Loading...</h1>

CSS

#tableDiv{
	height:200px;
	overflow:auto;
	width:auto;
}
.table {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.table table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.table tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.table table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.table table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.table tr:hover td{
	
}
.table tr:nth-child(odd){
	background-color:#e5e5e5; 
}
.table tr:nth-child(even){ 
	background-color:#ffffff; 
}
.table td{
	vertical-align:middle;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.table tr:last-child td{
	border-width:0px 1px 0px 0px;
}.table tr td:last-child{
	border-width:0px 0px 1px 0px;
}.table tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.table tr:first-child th{
	background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,...

JavaScript

if (window.File && window.FileReader && window.FileList && window.Blob) {
	document.addEventListener("DOMContentLoaded", function() {
		var Parser = (function Parser(){
			var rowsArray = [];
			var injectedRowsNr = 0;
			var fileInput = document.getElementById('file');
			var table = document.createElement('table');
			var loading = document.getElementById('loading');
			loading.style.display = "none";
			var tableHolderDiv = document.createElement('div');
			tableHolderDiv.id = "tableHolderDiv";
			var offsetCreatorDiv = document.createElement('div');
			offsetCreatorDiv.style.height = "0px";
		    var tbody = document.createElement('tbody');
		    var tableDiv = document.getElementById('tableDiv');
		    var checkbox = document.getElementById('chBox');
		    var infiniteLoop = true;
		    var config = {
		    	rowHeight : 28,
		    	tableOffset : 38
		    };

		    init();

		    function init(){
				table.id = "RMTable";
				table.className = 'table';
				rowsArray.length = 0;
				fileInput.addEventListener('change', handleFileSelect, false);
				tableDiv.addEventListener('scroll', function(event){
					if( infiniteLoop){
						if(event.target.scrollTop / event.target.scrollHeight > 0.8)
							addRows(50);
					} else {
						changeWholeGrid();
					}
				});
				checkbox.addEventListener('change', function(event){
					infiniteLoop = event.target.checked;
					if(event.target.checked){
						infiniteLoopExe(true);
					} else {
						//infiniteLoopExe(false);
		    			injectedRowsNr = 0;
						changeWholeGrid();
					}
				});
		    }

			function handleFileSelect(event){
				var file = fileInput.files[0]
				var reader = new FileReader();
				tableDiv.appendChild(tableHolderDiv);
				tableHolderDiv.appendChild(offsetCreatorDiv);
				tableHolderDiv.appendChild(table);
				reader.readAsText(file);
				reader.onload = function(e){
					rowsArray = CSVToArray(reader.result);
					console.log(rowsArray[1233]);
					addRows(50);
					loading.style.display =...