主页 / 问题 / 1144060
Accepted
FootballClub Rosma
Asked:2020-06-22 04:54:57 +0000 UTC2020-06-22 04:54:57 +0000 UTC

如何计算动态生成的输入字段中两个字段的总和？javascript

  • 772

大家好！有一个动态表，您可以在其中添加任意数量的字段并计算每个字段的总和。我是javascript新手，所以当然我没有足够的经验，我对如何解决这个问题的想法倾向于循环，或者如何将每次迭代的总和写入数组然后输出每个迭代的总和一对数字。任务是计算所有可能输入字段的总和 Number[1] + Number[2]，即 如果添加了 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>

javascript

2 个回答

  1. Best Answer

    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"— 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

  2. 您不需要生成唯一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;
}
    • 0

相关问题