colored rating scale

colored rating scale

by stofke

HTML

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>60</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>289</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>1020</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>5648</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 20em;
}

#score {
    width: 50%;
}

#name {
    width: 50%;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

th:nth-child(even),
td:nth-child(even) {
    text-align: center;
}

.vGood {
    background-color: #9f0;
}

.good {
    background-color: #cf0;
}

.avg {
    background-color: #fd0;
}

.poor {
    background-color: #fa0;
}

.vPoor {
    background-color: #f30;
}

JavaScript

$(function() {
    $('tr > td:odd').each(function(index) {
        var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
        var score = $(this).text();
        for (var i = 0; i < scale.length; i++) {
            if (score <= scale[i][1]) {
                $(this).addClass(scale[i][0]);
            }
        }
    });
});