Обработчик в таблице
Здравствуйте уважаемые форумчане.
Я пишу небольшой сайтец для внутреннего пользования на своём предприятии, почти 100% сайта я уже сделал с помощью php, и javascript ниразу не использовал (и чесно говоря пользоваться ним не умею), но возникла перед мной одна неудобная штуковина с которой я немогу справится и она мне доставляет приличные неудобства. и насколько я понял без javascript не обойтись (чтоб добавить в редактор прайса немного интерактивности). Помогите разобратся з обработчиком. Задача следующая: Нужно чтоб в колонке Цена, динамически после ввода значения в поле Наценка подставлялялся результат умножения: Базовая цена * Наценку Количество строк в таблице динамически меняется <form> <table> <tr><th>Базовая Цена</th> <th>Наценка</th> <th>Цена</th> </tr> <tr><td id="cena1">11</td><td><input id="two1" type="text" value="22"></td><td id="result1"></td></tr> <tr><td id="cena2">10</td><td><input id="two2" type="text" value="23"></td><td id="result2"></td></tr> <tr><td id="cena3">15</td><td><input id="two3" type="text" value="24"></td><td id="result3"></td></tr> <tr><td id="cena4">20</td><td><input id="two4" type="text" value="25"></td><td id="result4"></td></tr> </table> </form> |
<script>
window.onload = function(){
var ins = document.getElementById('RecountForm').getElementsByTagName('input'),
i = 0;
for(i; i < ins.length; i++){
result = ins[i].value * ins[i].parentNode.previousSibling.innerHTML;
ins[i].parentNode.nextSibling.innerHTML = result;
ins[i].onkeyup = function(){
result = this.value * this.parentNode.previousSibling.innerHTML;
this.parentNode.nextSibling.innerHTML = result;
}
}
}
</script>
</head>
<body>
<form id="RecountForm">
<table>
<tr><th>Базовая Цена</th> <th>Наценка</th> <th>Цена</th> </tr>
<tr><td id="cena1">11</td><td><input id="two1" type="text" value="22"></td><td id="result1"></td></tr>
<tr><td id="cena2">10</td><td><input id="two2" type="text" value="23"></td><td id="result2"></td></tr>
<tr><td id="cena3">15</td><td><input id="two3" type="text" value="24"></td><td id="result3"></td></tr>
<tr><td id="cena4">20</td><td><input id="two4" type="text" value="25"></td><td id="result4"></td></tr>
</table>
</form>
|
Огромное вам спасибо. Незнаю как, но оно работает.
|
Ещё подскажите пожалуйста как в функцию добавить форматирование вывода (результата), а то у меня получаются следующие числа:
15 15.6666666666666666666 20.25 а хотелось бы чтоб все числа были с двумя знаками после запятой(точки). |
|
Спасибо. То что нужно.
|
Уважаемые форумчане опять нужна ваша помощь.
А осуществим ли следующий вариант: Нужно чтоб в колонке Цена, динамически после ввода значения в поле Наценка или Базовая цена в колонку Цена подставлялялся результат умножения: Базовая цена * Наценку <form> <table> <tr><th>Базовая Цена</th> <th>Наценка</th> <th>Цена</th> </tr> <tr><td><input id="cena1" type="text" value="22"></td><td><input id="n1" type="text" value="1.5"></td><td id="result1"></td></tr> <tr><td><input id="cena2" type="text" value="23"></td><td><input id="n2" type="text" value="1.3"></td><td id="result2"></td></tr> <tr><td><input id="cena3" type="text" value="24"></td><td><input id="n3" type="text" value="1.1"></td><td id="result3"></td></tr> <tr><td><input id="cena4" type="text" value="25"></td><td><input id="n4" type="text" value="1.2"></td><td id="result4"></td></tr> </table> </form> Вариант предложеный во втором сообщении не работает в виду того что 2 колонки с тегом input. Мои потуги сделать что-либо подобное с getElementsByName и getElementsByClassName привели к нулевому результату. Зараннее благодарен за ответ. |
Цитата:
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа" вот тебе вариант через делегирование событий
<form id="RecountForm">
<table class="table">
<tr><th>Базовая Цена</th> <th>Наценка</th> <th>Цена</th> </tr>
<tr><td id="cena1">11</td><td><input class="inp" value="22"></td><td id="result1"></td></tr>
<tr><td id="cena2">10</td><td><input class="inp" value="23"></td><td id="result2"></td></tr>
<tr><td id="cena3">15</td><td><input class="inp" value="24"></td><td id="result3"></td></tr>
<tr><td id="cena4">20</td><td><input class="inp" value="25"></td><td id="result4"></td></tr>
</table>
</form>
<script>
(function() {
function calcFromInput(target) {
var parent = target.parentNode;
parent.nextElementSibling.innerHTML = target.value * parent.previousElementSibling.innerHTML;
}
document.getElementsByClassName("table")[0].oninput = function (e) {
var target = e.target;
if (target.tagName == "INPUT") {
calcFromInput(target);
}
}
function init() {
var inputs = document.getElementsByClassName("inp");
var length = inputs.length;
for (var i = 0; i < length; i++) {
calcFromInput(inputs[i]);
}
}
init();
})();
</script>
|
Решил (почти) следующим образом:
Взял скрипт с Поста №2, и немного его подкорректировал.
<script>
window.onload = function(){
var ins = document.getElementById('RecountForm').getElementsByClassName('inp'),
i = 0;
for(i; i < ins.length; i++){
result = ins[i].value * ins[i].parentNode.previousSibling.childNodes[0].value;
result = result.toFixed(2);
ins[i].parentNode.nextSibling.innerHTML = result;
ins[i].onkeyup = function(){
result = this.value * this.parentNode.previousSibling.childNodes[0].value;
this.parentNode.nextSibling.innerHTML = result.toFixed(2);
}
}
}
</script>
<form id="RecountForm" >
<table>
<tr><th>Наценка</th><th>Базовая Цена</th><th>Цена</th></tr>
<tr><td><input id="n1" type="text" value="22"></td><td><input class="inp" id="cena1" type="text" value="1.5"></td><td id="result1"></td></tr>
<tr><td><input id="n2" type="text" value="23"></td><td><input class="inp" id="cena2" type="text" value="1.3"></td><td id="result2"></td></tr>
<tr><td><input id="n3" type="text" value="24"></td><td><input class="inp" id="cena3" type="text" value="1.1"></td><td id="result3"></td></tr>
<tr><td><input id="n4" type="text" value="25"></td><td><input class="inp" id="cena4" type="text" value="1.2"></td><td id="result4"></td></tr>
</table>
</form>
Как-бы работает. но есть одно НО!!! Всё работает если менять данные в столбце Базовая цена. Как вызвать функцию перещёта ещё и по изменению в столбце Наценка? |
Цитата:
<form id="RecountForm">
<table class="table">
<tr><th>Наценка</th><th>Базовая Цена</th><th>Цена</th></tr>
<tr><td><input id="n1" type="text" value="22"></td><td><input value="1.5"></td><td id="result1"></td></tr>
<tr><td><input id="n2" type="text" value="23"></td><td><input value="1.3"></td><td id="result2"></td></tr>
<tr><td><input id="n3" type="text" value="24"></td><td><input value="1.1"></td><td id="result3"></td></tr>
<tr><td><input id="n4" type="text" value="25"></td><td><input value="1.2"></td><td id="result4"></td></tr>
</table>
</form>
<script>
(function() {
var table = document.getElementsByClassName("table")[0];
function calcFromInput(target) {
var grandparent = target.parentNode.parentNode;
var inputs = grandparent.querySelectorAll("input");
grandparent.children[2].innerHTML = Math.ceil(inputs[0].value * inputs[1].value);
}
table.oninput = function (e) {
var target = e.target;
if (target.tagName == "INPUT") {
calcFromInput(target);
}
}
function init() {
var inputs = table.querySelectorAll("input");
var length = inputs.length;
for (var i = 0; i < length; i++) {
calcFromInput(inputs[i]);
}
}
init();
})();
</script>
|
Цитата:
Я в первом сообщении написал что пишу сайтец для внутреннего пользования в своей компании, и ещё ко всему этому являюсь бухгалтером (даже не админом), и для меня это архисложно. Если с php я немножко знаком, то javascript, для меня тёмный лес, и чтоб написать элементарную загагулинку на нём, мне нужно перечитать кучу текста. А если эта функция мне нужна только один раз и в одном месте, то стоит ли учить язык? Про раздел "Работа", вы конечно правы. Извините что потратил впустую ваше время. Спасибо за помощь. Всё отлично работет. |
Цитата:
|
Делается примерно так: создается объект под кодовым именем СтрокаТаблицы. Этот объект имеет именованные свойства - по колонкам соответственно. В этот объект можно добавить методы. И тогда ваши дети не будут голодать.
|
Цитата:
|
В программировании надо знать ровно 1 язык - Паскаль - все остальное изучается на месте, по референсам и мануалам. Тем более когда в качеств паскАля имеется php. Лексически очень близки. Базовый уровень возьмется без проблем, а вот с продвинутым уровнем могут быть из-за этого %$#@тизма ява-скриптов с мутациями контекста.
|
| Часовой пояс GMT +3, время: 10:50. |