Заполнение таблицы
Строится некоторая таблица. Необходимо при нажатии на ячейку таблицы (там где нули) изменить числовое значение.
В дальнейшем введённые значения понадобятся для построения графика, поэтому не знаю обязателен ли jQuery Код:
|
|
Возможно задам глупый вопрос, но как в моём случае обратиться к ячейке таблицы. Как будет выглядеть селектор?
$("td").click(function ()
|
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 td")
.click(function () {
var text = $(this).text(),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
$(this).parent().html(this.value)
}
});
$(this).html(varX);
varX.setCursorPosition(text.length)
});
});
});
</script>
</head>
<body>
<form name="forma">
<p>Кол-во колонок:
<input type="number" id="cols" value="3">
</p>
<input type="submit" value="Подтвердить">
</form>
<output></output>
</body>
</html>
|
Появился вопрос,
Для каждой строки нужны разные ограничения. Например для первой строки значения в каждой из ячеек это число от 0 до 10. Для второй строки значение ячейки от 0 до 1, а сумма ячеек второго ряда должна быть =1. Сумму нахожу так, вот только условие не срабатывает (хотя сумму считает верно).
$("#start").on('click',function(){
var s=0;
var kol=$('tr').length-1;
$('tr:odd:last').each(function(){
var mn=$(this).find('td');
for (var i=0;i<kol;i++){
s+=(+mn.eq(i).text());
}
if (s>=1 || s<=1)
{
alert('сумма ряда не равна единице');
}
});
});
|
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 td")
.click(function () {
var text = $(this).text(),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
$(this).parent().html(this.value)
}
});
$(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>
|
А как можно осуществить эту проверку?
Цитата:
|
MrSmitt,
что должно быть результатом проверки? |
В случае, если хоть одна из ячеек не удовлетворяет заданным условиям, вывод сообщения и возврат к исходным значениям таблицы
if (this[0].tagName === 'TD'){
this.html(' ') //в моём случае таблица изначально пустая
}
|
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>
|
| Часовой пояс GMT +3, время: 06:11. |