List generator

by Evgeniy Lukovsky

SCSS

$width: 50px
div.header{
    div{
        width: $width;
        display: inline-block;
        margin: 1px;
        padding: 1px;
    }
}
input{
    width: $width;
    border-radius: 4px;
    border: 1px dotted green;
}

JavaScript

Object.prototype.firstKey = function () {
    for (var field in this) {
        return field;
    }
};
Object.prototype.firstKeyVal = function () {
    return this[this.firstKey()];
};
//*** CONFIGURATION
var fields = [{
    sizes: ['42', '44', '46', '48']
}, {
    colors: ['red', 'хуй']
}, {
    hren: ['1', '3']
}];
// END OF CONFIGURATION
function createDom() {
    var n = 1;
    fields.forEach(function (field) {
        n = n * field.firstKeyVal().length;
    });
    var header = '<div class="header"><div>Размер</div><div>Цвет</div><div>Хрень</div></div>';
    $(document.body).append(header);
    for (var i = 0; i < n; i++) {
        var div = '<div><input></input> <input></input> <input></input></div>';
        $(document.body).append(div);
    }
}

createDom();


$('div.header ~ div').each(function (lineId) {
    var step = 1;

    $(this).children().each(function (fieldId) {
        $(this).val(fieldValue(lineId, fieldId, step));
        step = step * fields[fieldId].firstKeyVal().length;
    });

    function fieldValue(lineId, fieldId, step) {
        return fields[fieldId].firstKeyVal()[Math.floor(lineId / step) % fields[fieldId].firstKeyVal().length];
    }
});