Как да направим така, че редовете през ред да са различни с javascript?

Бих искал да споделя с Вас един скрипт, който ми се наложи да напиша за домашно към безплатния курс на Телерик за front-end development . В случая задачата ми беше да направя така, че background-color на всеки ред на определена таблица да е различено оцветен през ред. По принцип това може да бъде постигнато много лесно и само с CSS (чрез селектора :nth-child() ), но тогава ще пренебрегнем потребителите използващи IE =< 8. Друг вариант би бил да използваме jquery, но да кажем че “Не познаваме такова животно”.

by qlayer

HTML

<table id="employees" border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Ward</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>Maguire</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Sara</td>
            <td>Lee</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Sara</td>
            <td>Reed</td>
            <td>26</td>
        </tr>
    </tbody>
</table>

CSS

.alt
{
    background-color:rgb(227,240,248);
    color:#000000;
}

JavaScript

function alternateRows(table, startWithBlank) {
    var rows = table.getElementsByTagName('TR'),
        cnt = 0,
        currentRow, even = typeof startWithBlank === 'boolean' ? !startWithBlank : true;

    for (cnt = 0; cnt < rows.length; cnt += 1) {
        currentRow = rows[cnt];
        even = even ? false : true;
        if (even) {
            currentRow.className = 'alt';
        }
    }
}

alternateRows(document.getElementById('employees'), true);