0

Всем привет! Есть динамическая таблица, в которую можно добавить сколько угодно полей и посчитать сумму каждого из полей. Я новичок в javascript, поэтому опыта конечно не хватает, мои мысли как решить эту задачу склоняются в сторону цикла, или как то записать сумму каждой итерации в массив и после уже вывести сумму каждой пары чисел. Задача такая, посчитать сумму Число[1] + Число[2], для всех возможных input полей, т.е. если будет добавлено 10 динамических полей, в ответе должно получится 10 полей с суммами.
Буду очень благодарен если, подскажите в каком направлении действовать, чтоб решить эту задачу.

var d = document;
var last_id = 0;

function add_value_f() {

  // находим нужную таблицу
  var tbody = d.getElementById('table').getElementsByTagName('tbody')[0];

  // создаем строку таблицы и добавляем ее
  var row = d.createElement("tr");
  tbody.appendChild(row);

  // создаем ячейки в вышесозданной строке
  var td1 = d.createElement("td");
  var td2 = d.createElement("td");


  row.appendChild(td1);
  row.appendChild(td2);

  last_id = last_id + 1;

  // добавляем формы ввода в ячейки
  td1.innerHTML = '<input type="number" min="0" id="chislo[' + last_id + ']" class="data">';
  td2.innerHTML = '<input type="number" min="0" id="chislo2[' + last_id + ']" class="data">';
};

function totalSum() {
  var num1 = document.getElementById('chislo[' + last_id + ']').value;
  var num1p = parseInt(num1);
  if (isNaN(num1p)) {
    num1p = 0;
  }

  var num2 = document.getElementById('chislo2[' + last_id + ']').value;
  var num2p = parseInt(num2);
  if (isNaN(num2p)) {
    num2p = 0;
  }

  var sum;
  sum = num1p + num2p;
  out.innerHTML = " " + sum + "<br>";

}
<div class="stats-tab">
  <h1> Таблица</h1>
  <table id="table">
    <thead>
      <tr>
        <th class="data">Число 1</th>
        <th class="data">Число 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="number" id="chislo[0]" min="0" class="data"></td>
        <td><input type="number" id="chislo2[0]" min="0" class="data"></td>
      </tr>
    </tbody>
  </table>
</div>
</div>
<div class="col-12">
  <input type="button" onclick="add_value_f()" value="Добавить" />
</div>
</div>
<button onclick="totalSum()">=</button>
<hr>
<h1>Результаты:</h1>
<div id="out"></div>

2 ответа 2

1

let test = 1;

_id("append").addEventListener("click", function () {
  let tbody = document.querySelector("#table tbody");

  let tr = `<tr>
    <td><input type="number" min="0" class="data" value="${ test++ }"></td>
    <td><input type="number" min="0" class="data" value="${ test++ }"></td>
  </tr>`;
  
  tbody.insertAdjacentHTML("beforeEnd", tr);
});

_id("count").addEventListener("click", function() {
  let inp = document.querySelectorAll("#table input.data");
  
  let result = [];
  for( let i = 0; i < inp.length; i += 2 ) {
    result.push( Number(inp[i].value) + Number(inp[i+1].value) );
  }
  
  _id("out").innerHTML = result.join("<br>");
});

/***/
function _id(str) {
  return document.getElementById(str);
}
<table id="table">
  <tr>
    <td><input type="number" min="0" class="data"></td>
    <td><input type="number" min="0" class="data"></td>
  </tr>
</table>

<button id="append">Добавить</button>
<button id="count">=</button>
<hr>
<h1>Результаты:</h1>
<div id="out"></div>

"#table input.data" — все инпуты с классом "data", которые находятся внутри id="table".

Ну а в конце цикла не обязательно должен быть i++. Туда можно добавить любой кусок кода (даже функцию), которая будет выполняться на каждой итерации:

for( let i = 1; i < 1024; console.log( "Оппа!", i = i * 2 ) );
// Для демо. В реальном коде не надо так!)
// Можно переписать:

for( let i = 1; i < 1024; i *= 2 ) {
  // console.log( i );
};

1
  • Спасибо большое буду изучать Ваши оба варианта! 22 июн 2020 в 7:24
0

Вам нет необходимости генерировать уникальные id инпутам, потому как ваш якорный элемент - это ряд. Собрали все ряды, прошли по каждому ряду и посчитали суммы в инпутах.

const table = document.getElementById('table');
const tbody = table.lastElementChild; // почти надежно, но можно по старинке селектором забрать боди

// функция отдаст массив чисел, выводите в каком угодно виде
function sumUp() {
    const sumArr = new Array(tbody.children.length);
    for (let i = 0, sum = 0; i < sumArr.length; i++, sum = 0) {
        tbody.children[i]
            .querySelectorAll('input[type=number]')
            .forEach(({ value }) => sum += +value);
        sumArr[i] = sum;
    }
    return sumArr;
}
1
  • Спасибо, интересное решение, тоже буду пробовать разобраться детально с Вашим вариантом! 22 июн 2020 в 7:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.