MrSmitt,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
(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) {
methods.init.apply(this, arguments);
return this
};
}(jQuery));
$('form').on('submit', function(e) {
e.preventDefault();
$('output').generateTable({
cols: $('#cols', this).val(),
add: 'html'
}).find("tr:odd")
.each(function(indx, tr){
var minMax = [10,1];
$('td', tr).click(function () {
var text = $(this).text(),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
var val = +this.value||0;
if(val < 0 || val > minMax[indx] )
{
alert("max = "+minMax[indx]);
val = text;
};
$(this).parent().html(val)
}
});
$(this).html(varX);
varX.setCursorPosition(text.length)
});
});
});
$("#go").on('click',function(){
var s=0;
$('output tr:odd:last td').each(function(i,td){
s+=(+$(td).text()*100);
});
if (s !=100)
{
alert('сумма ряда не равна единице');
}
});
});
</script>
</head>
<body>
<form name="forma">
<p>Кол-во колонок:
<input type="number" id="cols" value="3">
</p>
<input type="submit" value="Подтвердить">
</form>
<output></output>
<input id="go" name="" type="button" value="start">
</body>
</html>
