Обработчик в таблице
Здравствуйте уважаемые форумчане.
Я пишу небольшой сайтец для внутреннего пользования на своём предприятии, почти 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> |
Часовой пояс GMT +3, время: 16:12. |