matchResultsFragment.html

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery1.6.2.js" type="text/javascript"></script>	

<h3 class="centered">Qualification Match Results</h3>
<table id="qualificationResultsTable" class="centered table table-striped table-bordered table-condensed">
	<tr>
		<td><strong>Match</strong></td>
		<td><strong>Red 1</strong></td>
		<td><strong>Red 2</strong></td>
		<td><strong>Red 3</strong></td>
		<td><strong>Blue 1</strong></td>
		<td><strong>Blue 2</strong></td>
		<td><strong>Blue 3</strong></td>
		<td><strong>Red Score</strong></td>
		<td><strong>Blue Score</strong></td>
	</tr>
</table>
<h3 class="centered">Elimination Match Results</h3>
<table id="eliminationResultsTable" class="centered table table-striped table-bordered table-condensed">
	<tr>
		<td><strong>Match</strong></td>
		<td><strong>Red 1</strong></td>
		<td><strong>Red 2</strong></td>
		<td><strong>Red 3</strong></td>
		<td><strong>Blue 1</strong></td>
		<td><strong>Blue 2</strong></td>
		<td><strong>Blue 3</strong></td>
		<td><strong>Red Score</strong></td>
		<td><strong>Blue Score</strong></td>
	</tr>
</table>
<script type="text/javascript">
	$("document").ready( function() {						  					
		$.ajax( {
			url: "getMatchResults.php",
			type: "GET",
			dataType: 'json',
			success: function( matchResults ) {
				var resultsTable;
				for (var i = 0; i < matchResults.length; i++) {
					if (matchResults[i].type === 'Q') {
						resultsTable = document.getElementById('qualificationResultsTable');
					} else if (matchResults[i].type === 'E') {
						resultsTable = document.getElementById('eliminationResultsTable');
					} else {
						return;
					}
				
					var rowCount = resultsTable.rows.length;
					var row = resultsTable.insertRow(rowCount);
					var cell;
					row.insertCell(0).innerHTML = matchResults[i].matchNumber;
					cell = row.insertCell(1);
					cell.innerHTML = matchResults[i].red[0];
					cell.className = 'redTeam';
					cell = row.insertCell(2);
					cell.innerHTML = matchResults[i].red[1];
					cell.className = 'redTeam';
					cell = row.insertCell(3);
					cell.innerHTML = matchResults[i].red[2];
					cell.className = 'redTeam';
					cell = row.insertCell(4);
					cell.innerHTML = matchResults[i].blue[0];
					cell.className = 'blueTeam';
					cell = row.insertCell(5);
					cell.innerHTML = matchResults[i].blue[1];
					cell.className = 'blueTeam';
					cell = row.insertCell(6);
					cell.innerHTML = matchResults[i].blue[2];
					cell.className = 'blueTeam';
					
					var redScore = matchResults[i].redFinal
					var blueScore = matchResults[i].blueFinal;
													
					cell = row.insertCell(7);
					cell.innerHTML = redScore;
					cell.className = (redScore > blueScore) ? 'redWinner' : 'redScore';
					cell = row.insertCell(8);
					cell.innerHTML = blueScore;
					cell.className = (blueScore > redScore) ? 'blueWinner' : 'blueScore';
				}
			}	
		});
	});
</script>