Dynamic div scroller

Dynamic div scroller based on the table height

by Tirthadeep Roy

HTML

<button onclick="populateTable(event);">Populate table</button><br/>
<details>
        <summary>Some table</summary>
        <div id="logArea" class="content scroller">
			<table id="testTable" border="1">
				<thead>
					<th>Serial</th>
					<th>Time</th>
					<th>Type</th>
					<th>ProcessId</th>
					<th>Module</th>
					<th>Description</th>
				</thead>
			</table>
        </div>
</details>

CSS

.content {
	padding: 2px;
	border: 1px solid #666666;
	border-top: none;
}
.scroller {
	overflow-y: auto;
  height: 300px;
}
summary {
	color: white;
	background-color: #666666;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid #dedede;
	outline: none;
	padding: 2px;
}
table {
  width: 100%;
}
table, th, td {
  border: 1px solid black;
}

JavaScript

function generateTableData() {
		var returnArray = [];
		for (var i = 0; i < 5; i++) {
			var tempObj = {};
			var dateTime = new Date();
			tempObj.Time = dateTime.getHours()+":"+dateTime.getMinutes();
			tempObj.Type = "Test Type";
			tempObj.ProcessId = "Test Proc";
			tempObj.Module = "Test Module";
			tempObj.Description = "This is the description";
			returnArray[i] = tempObj;
		}		
		return returnArray;
	};
  function populateTable(event) {
		var t0 = performance.now();
		var tableData = generateTableData();
		var t1 = performance.now();
		console.info("Time taken to generate table data = %d ms",(t1-t0));
		var dataLength = tableData.length;
		var table = document.getElementById("testTable");
		var t0 = performance.now();
		for (var i = 0; i < dataLength; i++) {
			var row = table.insertRow(-1);
			// Initially have to pass as an argument howmany columns required, can be handled.
			var cell1 = row.insertCell(0);
			var cell2 = row.insertCell(1);
			var cell3 = row.insertCell(2);
			var cell4 = row.insertCell(3);
			var cell5 = row.insertCell(4);
			var cell6 = row.insertCell(5);

			cell1.innerHTML = i;
			cell2.innerHTML = tableData[i].Time;
			cell3.innerHTML = tableData[i].Type;
			cell4.innerHTML = tableData[i].ProcessId;
			cell5.innerHTML = tableData[i].Module;
			cell6.innerHTML = tableData[i].Description;
			
		}
		var t1 = performance.now();
		console.info("Time taken to populate %d records in to the table data = %d ms",dataLength, (t1-t0));
	};