checkers layout pure javascript

by Yuval Bar-On

HTML

<input id="tr" type="text" />
<input id="td" type="text" />
<button type="button" id="btn">Create!</button>
<table id="table">
</table>

CSS

* { font-family: Ubuntu, Helvetica, sans-serif; }
#btn { margin: 2px 0; padding: 5px; background: white; border-radius: 3px; border: 1px solid #ddd; }

.even {
    background: red;
}
.odd {
    background: yellow;
}

JavaScript

var rows = document.getElementById('tr'),
    cols = document.getElementById('td'),
    btn  = document.getElementById('btn');

function fillTable() {
    var table = document.getElementById('table'),
        tr, td, even, odd;
    
    table.textContent = "";
    
    for (var i=0; i < rows.value; i++) {
        tr = document.createElement('tr');
        
        even = (i % 2 == 0) ? "even" : "odd";
        odd  = (i % 2 == 0) ? "odd"  : "even";
        
        for (var j=0; j < cols.value; j++) {
            td = document.createElement('td');
            td.className = (j % 2 == 0) ? even : odd;
            td.textContent = 'foo';
            tr.appendChild(td);
        }
        
        table.appendChild(tr);
    }
}

btn.addEventListener('click', fillTable);