<body>
<form name="forma">
<p>Кол-во колонок:
<input type="number" id="cols" value="3">
</p>
<input type="submit" value="Подтвердить">
</form>
<output></output>
</body>
$(function(){
(function($) {
var opts = {
row: 2,
col: 2,
add: 'html'
};
var methods = {
init: function(o) {
var table = $('<table />');
opts = $.extend(opts, o);
if (opts.row <= 0 || opts.col <= 0) {
return false;
}
for (var i = 0; i < opts.row; i++) {
table.append(methods.makeRow(i));
}
this[opts.add](table);
},
makeRow: function(i) {
var L = methods.letter(i);
return $('<tr />', {
html: $('<td />').duplicate(opts.cols )
}).duplicate(2)
.first()
.find('td').each(function(i, el) {
$(el).html(L + '<sub>' + i + '</sub>');
})
.end()
.prepend($('<td />', {
attr: {
rowspan: 2
},
text: L
})).end();
},
letter: function(i) {
var start = 88;
return String.fromCharCode(i > start ? start : start + i);
}
};
$.fn.duplicate = function(count) {
var tmp = [];
for (var i = 0; i < count; i++) {
if (this[0].tagName === 'TD') {
this.text(0);
}
$.merge(tmp, this.clone().get());
}
return this.pushStack(tmp);
};
$.fn.generateTable = function(o) {
return methods.init.apply(this, arguments);
};
}(jQuery));
$('form').on('submit', function(e) {
e.preventDefault();
$('output').generateTable({
cols: $('#cols', this).val(),
add: 'html'
});
});
});
|