JS Array to Table

With optional results highlighting buttons

by Rynne Cowham

HTML

<body>
  <div id="container">
	<table id="testresults">
	  <caption>QA Test Results for 
		<script>document.write((new Date()).toString().split(' ').splice(1,3).join(' '));</script>
	  </caption>
	  <thead>
		<tr>
		  <th>QA Analyst</th>
		  <th>App Name</th>
		  <th>Test</th>
		  <th>Result</th>
		</tr>
	  </thead>
	  <tbody id="testdata">
	  </tbody>
	</table>
</div>
<br />
<div class="highlighters">
  <h1>Highlight:</h1>
  <ul class="buttonrow">
	<li><button id="screenResults">All screenTransition Results</button></li>
	<li><button id="iWorkTests">All iWork Tests</button></li>
	<li><button id="delayWarnings">All Lags > 2 sec</button></li>
  </ul>
</div>
<br />
<div id="error"></div>

CSS

#testresults { display:table; table-layout:fixed; width:95%; border:1px solid #090; border-collapse:collapse; font-family:'Calibri',Helvetica,sans-serif; text-align:left; }
	#testresults caption { margin:1em 0; clear:both; font-style:italic; text-align:left; }
	#testresults thead { padding:6px 0; font-weight:bold; font-size:1.25em; color:#090;}
	#testresults th,
	#testresults td { border:1px solid #090; border-collapse:collapse; }
tbody#testdata tr:nth-child(odd) { background: #efffde; }
tbody#testdata td { font-size:1em; }
.highlighters h1 { display:block; float:left; clear:none; margin-right:10px; font-size:1.25em; line-height:1.5; }
ul.buttonrow, ul.buttonrow li { list-style-type:none; float:left; padding:0; }
ul.buttonrow li { margin-right:10px; }
ul.buttonrow li button { -webkit-appearance:none; border:2px solid #ffcc00; }
.highlighted { background:yellow !important; }

JavaScript

$(document).ready(function(){
	var testCases = [
		{
			"name" : "Ben",
			"app" : "iWork",
			"test" : "loadTime",
			"result" : 1.2
		},
		{
			"name" : "Rebecca",
			"app" : "Pages",
			"test" : "runTime",
			"result" : 2.5
		},
		{
			"name" : "Greg",
			"app" : "GarageBand",
			"test" : "screenTransition",
			"result" : 0.4
		},
		{
			"name" : "Susan",
			"app" : "Notes",
			"test" : "loadTime",
			"result" : 1.8
		},
		{
			"name" : "Edward",
			"app" : "Calendar",
			"test" : "detailPopUp",
			"result" : 1.6
		},
		{
			"name" : "Rynne",
			"app" : "Pages",
			"test" : "screenTransition",
			"result" : 0.9
		},
		{
			"name" : "Sanja",
			"app" : "iWork",
			"test" : "importImage",
			"result" : 2.1
		},
		{
			"name" : "Susan",
			"app" : "GarageBand",
			"test" : "runTime",
			"result" : 3.1
		},
		{
			"name" : "Ben",
			"app" : "Notes",
			"test" : "screenTransition",
			"result" : 1.1
		},
		{
			"name" : "Sanja",
			"app" : "Calendar",
			"test" : "importItem",
			"result" : 2.8
		},
		{
			"name" : "Greg",
			"app" : "iWork",
			"test" : "runTime",
			"result" : 3.2
		},
		{
			"name" : "Rynne",
			"app" : "GarageBand",
			"test" : "screenTransition",
			"result" : 1.4
		},
		{
			"name" : "Ben",
			"app" : "iWork",
			"test" : "runTime",
			"result" : 1.6
		},
		{
			"name" : "Rebecca",
			"app" : "Calendar",
			"test" : "detailPopUp",
			"result" : 2.7
		},
		{
			"name" : "Bryan",
			"app" : "GarageBand",
			"test" : "screenTransition",
			"result" : 1.3
		}  
	];
	var tabledata = "";
	for (i=0; i<testCases.length; i=(i+1)){
		tabledata = "<tr>";
		tabledata += "<td>" + testCases[i].name + "</td>";
		tabledata += "<td>" + testCases[i].app + "</td>";
		tabledata += "<td>" + testCases[i].test + "</td>";
		tabledata += "<td class='timeout'>" + testCases[i].result + "</td>";
		tabledata += "</tr>";
		$('#testdata').append(tabledata);
	};
	// highlighters
	$('button').click(function(event){...