Tell me how to implement such a functional: when I enter a field, for example, 40cm, a number, for example 2, then we assign the value of the bounch field to bounch = bounch + 2 and the following formula is considered in the stems field stems stems = bounch * txb

 <div class="data-list"> <table> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="40cm"></td> <td><span></span> <input type="text" name="50cm"></td> <td><span></span> <input type="text" name="60cm"></td> <td><span></span> <input type="text" name="70cm"></td> <td><span></span> <input type="text" name="80cm"></td> <td><span></span> <input type="text" name="90cm"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> </div>

  • Do not understand what 40см ? - Raz Galstyan
  • And yet, when in the field the second time the number to write what will happen to the bounch ? - Raz Galstyan
  • 40cm is the name of the field, if we wrote down the number 2 in the 40cm field, then bouch = bounch + 2, if we recorded 5 in the 50cm field, then bounch = bounch + 5 total is 7, and so on. - Aslero
  • And if in 40 wrote 2 and then in the same field they wrote 25, then what will happen? 2+ 25? - Raz Galstyan
  • no overwrite ie will be 25 - Aslero

2 answers 2

All calculations begin on line tr for the onkeyup event. From it comes the immersion to the descendants.

 function foo(el) { let inputs = el.getElementsByTagName('input'), inputsToSum = el.getElementsByClassName('class'); for (let i = 0; i < inputsToSum.length; i++) { var s = (parseInt(s) || 0) + (parseInt(inputsToSum[i].value) || 0); } inputs.bounch.value = s; inputs.stems.value = inputs.bounch.value * inputs.txb.value; } 
 <div class="data-list"> <table id="mytable"> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row" onkeyup="foo(this)"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="40cm" class="class"></td> <td><span></span> <input type="text" name="50cm" class="class"></td> <td><span></span> <input type="text" name="60cm" class="class"></td> <td><span></span> <input type="text" name="70cm" class="class"></td> <td><span></span> <input type="text" name="80cm" class="class"></td> <td><span></span> <input type="text" name="90cm" class="class"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> <tr class="data-row" onkeyup="foo(this)"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="40cm" class="class"></td> <td><span></span> <input type="text" name="50cm" class="class"></td> <td><span></span> <input type="text" name="60cm" class="class"></td> <td><span></span> <input type="text" name="70cm" class="class"></td> <td><span></span> <input type="text" name="80cm" class="class"></td> <td><span></span> <input type="text" name="90cm" class="class"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> </div>

  • and if we enter 5 into 40cm and enter 5 into the 50cm field, then remove the number from 40cm, then the error, and then enter 1, then the bounch will be 1, and 6 days should be Aslero
  • @Aslero describe the expected behavior in question in advance. Updated the answer. - Kirill Korushkin
  • and how to execute in the current line? if we add 2 lines, everything will be entered in 1 - Aslero
  • did not catch the idea - Kirill Korushkin
  • we now have one tr line, if there are 2 or more, how to calculate for each tr line? - Aslero

Solution of the problem (Handler hung on onchange, but it seems to me worth hanging up on a separate button "calculation"). As I understand it, the author wants to get the sum of bundles from all the CMs. (Corrected code for correct response)

  function calc() { var rows = document.getElementsByClassName('data-row'); for (var i = 0; i < rows.length; i++) { var currentRow = rows[i]; var elements = currentRow.getElementsByTagName('input'); //Получаем все элементы //var cm40Element = getChild(currentRow, 'cm40'); var cm40Element = elements.cm40; var cm50Element = elements.cm50; var cm60Element = elements.cm60; var cm70Element = elements.cm70; var cm80Element = elements.cm80; var cm90Element = elements.cm90; var bounchElement = elements.bounch; var stemsElement = elements.stems; var txbElement = elements.txb; //Получаем значения элементов var bounchValue = parseInt(bounchElement.value); var txbValue = parseInt(txbElement.value); var cm40Value = parseInt(cm40Element.value); var cm50Value = parseInt(cm50Element.value); var cm60Value = parseInt(cm60Element.value); var cm70Value = parseInt(cm70Element.value); var cm80Value = parseInt(cm80Element.value); var cm90Value = parseInt(cm90Element.value); //Проверяем что у нас что то введено if (isNaN(cm40Value)) { cm40Value = 0; } if (isNaN(cm50Value)) { cm50Value = 0; } if (isNaN(cm60Value)) { cm60Value = 0; } if (isNaN(cm70Value)) { cm70Value = 0; } if (isNaN(cm80Value)) { cm80Value = 0; } if (isNaN(cm90Value)) { cm90Value = 0; } if (isNaN(txbValue)) { txbValue = 0; } //bounch равно сумам всех см bounchValue = cm40Value + cm50Value + cm60Value + cm70Value + cm80Value + cm90Value; bounchElement.value = bounchValue; //Умножаем bounchValue на txb stemsElement.value = bounchValue * txbValue } } 
 <div class="data-list"> <table> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="cm40" onchange="calc()"></td> <td><span></span> <input type="text" name="cm50" onchange="calc()"></td> <td><span></span> <input type="text" name="cm60" onchange="calc()"></td> <td><span></span> <input type="text" name="cm70" onchange="calc()"></td> <td><span></span> <input type="text" name="cm80" onchange="calc()"></td> <td><span></span> <input type="text" name="cm90" onchange="calc()"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="cm40" onchange="calc()"></td> <td><span></span> <input type="text" name="cm50" onchange="calc()"></td> <td><span></span> <input type="text" name="cm60" onchange="calc()"></td> <td><span></span> <input type="text" name="cm70" onchange="calc()"></td> <td><span></span> <input type="text" name="cm80" onchange="calc()"></td> <td><span></span> <input type="text" name="cm90" onchange="calc()"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb" value="25"></td> <td><span></span> <input type="text" name="cm40" onchange="calc()"></td> <td><span></span> <input type="text" name="cm50" onchange="calc()"></td> <td><span></span> <input type="text" name="cm60" onchange="calc()"></td> <td><span></span> <input type="text" name="cm70" onchange="calc()"></td> <td><span></span> <input type="text" name="cm80" onchange="calc()"></td> <td><span></span> <input type="text" name="cm90" onchange="calc()"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> </div>