Форум

amd3000 · #1 (**permalink**) 12.08.2014, 15:51

Здравствуйте уважаемые форумчане.

Я пишу небольшой сайтец для внутреннего пользования на своём предприятии, почти 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>

Viral · #2 (**permalink**) 12.08.2014, 16:03

<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>

amd3000 · #3 (**permalink**) 12.08.2014, 16:55

Огромное вам спасибо. Незнаю как, но оно работает.

amd3000 · #4 (**permalink**) 12.08.2014, 17:53

Ещё подскажите пожалуйста как в функцию добавить форматирование вывода (результата), а то у меня получаются следующие числа:
15
15.6666666666666666666
20.25
а хотелось бы чтоб все числа были с двумя знаками после запятой(точки).

Pavel M. · #5 (**permalink**) 12.08.2014, 18:29

http://learn.javascript.ru/number#о...очности

amd3000 · #6 (**permalink**) 12.08.2014, 18:42

Спасибо. То что нужно.

amd3000 · #7 (**permalink**) 24.09.2014, 22:45

Уважаемые форумчане опять нужна ваша помощь.
А осуществим ли следующий вариант:

Нужно чтоб в колонке Цена, динамически после ввода значения в поле Наценка или Базовая цена в колонку Цена подставлялялся результат умножения: Базовая цена * Наценку

<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 привели к нулевому результату.

Зараннее благодарен за ответ.

bes · #8 (**permalink**) 24.09.2014, 23:35

Сообщение от amd3000

Вариант предложеный во втором сообщении не работает в виду того что 2 колонки с тегом input. Мои потуги сделать что-либо подобное с getElementsByName и getElementsByClassName привели к нулевому результату.

учись путешествовать по DOM, эту задачу ты должен дорешать сам и выложить результат, иначе

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа"

вот тебе вариант через делегирование событий

<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>

amd3000 · #9 (**permalink**) 25.09.2014, 23:17

Решил (почти) следующим образом:
Взял скрипт с Поста №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>

Как-бы работает. но есть одно НО!!!

Всё работает если менять данные в столбце Базовая цена.

Как вызвать функцию перещёта ещё и по изменению в столбце Наценка?

bes · #10 (**permalink**) 25.09.2014, 23:50

Сообщение от amd3000

Как-бы работает. но есть одно НО!!!

Всё работает если менять данные в столбце Базовая цена.

Как вызвать функцию перещёта ещё и по изменению в столбце Наценка?

не сложно, не так ли?

<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>

Форум

Справочник

Discord чат

Курсы javascript