Good day! I am trying to create a table layout in which there will be an indefinite number of rows, but it is necessary to dynamically calculate the sum of 2x input in a row and output it to the third. How to create a dynamic definition of ID input in a string for further manipulation of their values?

<body> <table border="1"> <thead> <tr><th>№</th> <th>Цена</th> <th>Кол-во</th> <th>Сумма</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="num" value="1"> </td> <td><input type="text" id="cena1"> </td> <td><input type="text" id="kol_vo1"> </td> <td><input type="text" id="sum1"> </td> </tr> <tr> <td><input type="text" id="num" value="2"></td> <td><input type="text" id="cena2"> </td> <td><input type="text" id="kol_vo2"></td> <td><input type="text" id="sum2"></td> </tr> </tbody> </table> <script> ed1=document.getElementById("cena1"); ed2=document.getElementById("kol_vo1"); ed1.oninput = function() { document.getElementById('sum1').value = Number(ed1.value)*Number(ed2.value); } ed2.oninput = function() { document.getElementById('sum1').value = Number(ed1.value)*Number(ed2.value); } </script> </body>

    1 answer 1

     var count = 0; function append() { count++; var table = document.getElementById('append'); var tr = document.createElement('TR'); var td = document.createElement('TD'); var input_n = document.createElement('INPUT'); input_n.type = 'text'; input_n.className = 'num'; input_n.value = count; input_n.readOnly = 'true'; td.appendChild(input_n); tr.appendChild(td); var td = document.createElement('TD'); var input_c = document.createElement('INPUT'); input_c.type = 'text'; input_c.id = 'cena' + count; td.appendChild(input_c); tr.appendChild(td); var td = document.createElement('TD'); var input_k = document.createElement('INPUT'); input_k.type = 'text'; input_k.id = 'kol_vo' + count; td.appendChild(input_k); tr.appendChild(td); var td = document.createElement('TD'); var input_s = document.createElement('INPUT'); input_s.type = 'text'; input_s.id = 'sum' + count; td.appendChild(input_s); tr.appendChild(td); table.appendChild(tr); input_k.oninput = function() { input_s.value = input_k.value * input_c.value }; input_c.oninput = function() { input_s.value = input_k.value * input_c.value }; } 
     <table border="1" id="append"> <thead> <tr><th>№</th> <th>Цена</th> <th>Кол-во</th> <th>Сумма</th> </tr> </thead> <tbody> </tbody> </table> <br> <button onclick="append()">Добавить строку</button>

    • Thank. Sample works well! - CHIM