Shulte grid

by molecule

HTML

<div id="content"></div>

CSS

table {
    border: 2px #000 solid;
  	border-spacing: 0;
  	border-collapse: collapse;
  	margin: 200px auto;
}
table td {
    border: 1px #000 solid;
  	text-align: center;
  	padding: 6px 8px;
  	font-size: 22px;
}

JavaScript

var gridSize = 5;

var shuffle = function (o) {
    for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

var fillArray = function (n) {
    var store = [];
    for (var i = 1; i <= n; i++) {
        store.push(i);
    }
    return store;
};

var genTable = function (list, colsNumber) {
    var html = '<table>';
    var rowsNumber = list.length / colsNumber;
    var listIndex = 0;

    for (var rowIndex = 0; rowIndex < rowsNumber; rowIndex++) {
        html += '<tr>';
        for (var colIndex = 0; colIndex < colsNumber; colIndex++) {
            html += '<td>';
            html += list[listIndex++];
            html += '</td>';
        }
        html += '</tr>';
    }

    html += '</table>';

    return html;
}

var gridContent = fillArray(gridSize * gridSize);
gridContent = shuffle(gridContent);

document.getElementById('content').innerHTML = (genTable(gridContent, gridSize));