JSFiddle - React, Tailwind, and code Playground

by dweiliu

HTML

<section class="group summer">
		<article class="weeklyStandings">
            <h2>Week 1</h2>
			<table>
				<tr>
					<th>Player</th>
					<th>Won</th>
					<th>Played</th>
					<th>Winning %</th>
				</tr>
				<tr class="record">
					<td>Player 1</td>
					<td>8</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 2</td>
					<td>8</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 3</td>
					<td>7</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 4</td>
					<td>6</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 5</td>
					<td>6</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 6</td>
					<td>6</td>
					<td>12</td>
					<td></td>
				</tr>
				<tr class="record">
					<td>Player 7</td>
					<td>6</td>
					<td>12</td>
					<td></td>
				</tr>
			</table>
		</article>
	</section>

CSS

body { 
    font-size: 13px; 
    font-family: "Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif; 
    line-height: 20px; 
}
section {
    margin: 0 auto;
    padding: 20px 40px;
    width: 950px;
    border-left: 1px solid #999; 
    border-right: 1px solid #999; 
}
a {
    text-decoration: none;
}
a:hover {
    font-color: red;
}
h2 {
    padding: 5px;
    font-size: 16px;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
.winner {
    color: red;
}
.hidden {
    display: none;
}
.fleft {
    float: left;
}
.fright {
    float: right;
}
table {
    width: 300px;
}
article {
    float: left;
    margin-right: 22px;
}
table th {
    font-weight: bold;
}
table th, table td {
    padding: 5px 5px;
}
table td:nth-child(2), table td:nth-child(3), table td:nth-child(4) {
    text-align: center;
}
table tr:nth-child(2n) {
    background: #eee;
}
tr.sub {
    background: #666;
    color: #fff;
}
table.player {
    border: 1px solid #eee;
}

JavaScript

$(document).ready(function(){
    $('tr.record').each(function(){
        var cells = $(this).children('td');
        var gamesWon = parseInt(cells[1].innerText);
        var gamesPlayed = parseInt(cells[2].innerText);
        var winningPercentage = (gamesWon / gamesPlayed * 100).toFixed(1) + "%";
        $(cells[3]).html(winningPercentage);
    });
    $('article.weeklyStandings').each(function(){
       var numPlayers = $(this).children('table tr').length;
       $(this).children('h2').append(" - " + numPlayers + " Players");
    });
});