Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2014, 15:51
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

Обработчик в таблице
Здравствуйте уважаемые форумчане.

Я пишу небольшой сайтец для внутреннего пользования на своём предприятии, почти 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>
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2014, 16:03
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2014, 16:55
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

Огромное вам спасибо. Незнаю как, но оно работает.
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2014, 17:53
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

Ещё подскажите пожалуйста как в функцию добавить форматирование вывода (результата), а то у меня получаются следующие числа:
15
15.6666666666666666666
20.25
а хотелось бы чтоб все числа были с двумя знаками после запятой(точки).
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2014, 18:29
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

http://learn.javascript.ru/number#о...очности
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2014, 18:42
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

Спасибо. То что нужно.
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2014, 22:45
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

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

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

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

Зараннее благодарен за ответ.
Ответить с цитированием
  #8 (permalink)  
Старый 24.09.2014, 23:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от 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>
Ответить с цитированием
  #9 (permalink)  
Старый 25.09.2014, 23:17
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

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


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

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

Как вызвать функцию перещёта ещё и по изменению в столбце Наценка?
Ответить с цитированием
  #10 (permalink)  
Старый 25.09.2014, 23:50
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить выполняться обработчик после всех имеющихся обработчиков данного элемен Анатолий Саратовцев jQuery 2 08.10.2012 18:49
Как снять обработчик с очередью FanAizu jQuery 0 11.02.2012 19:28
повешен ли обработчик pharrell Events/DOM/Window 1 18.07.2011 01:35
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55