Filling a Table Diagonally

Answer to http://stackoverflow.com/questions/11168760/use-jquery-to-dynamically-number-table-columns-diagonally

HTML

<table>
    <tbody>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>

CSS

table { 
    border-collapse: collapse; 
}
td { 
    border: 1px solid #333; 
    padding: 10px; 
    text-align: center; 
}

.d1 { background: green }
.d2 { background: #336699; }
.d3 { background: #6699CC; }
.d4 { background: #99CCFF; }
.d5 { background: magenta; }
.d6 { background: #FFCC99; }
.d7 { background: #CC9966; }
.d8 { background: #996633; }
.d9 { background: red; }

JavaScript

// see http://stackoverflow.com/questions/11168760/use-jquery-to-dynamically-number-table-columns-diagonally

var $table = $('table'),
    $rows = $table.find('tr'),
    _rows = $rows.length,
    _cols = $rows.first().children().length,
    max = _rows * _cols,
    d = 1,
    r = 0,
    c = 0;

for (var i=1; i <= max; i++) {
    $rows.eq(r).children().eq(c)
        .addClass('d' + d)
        .text(i);

    if (i < max/2) {
        if (!r) {
            r = c + 1;
            c = 0;
            d++;
            continue;
        }
    } else {
        if (c + 1 == _cols) {
            c = 1 + r;
            r = _rows -1;
            d++;
            continue;
        }
    }
    
    r--;
    c++;
}