Сумма ячеек таблицы на JavaScript

Question

var counter = 1;
var table = document.querySelector('TableScore');
buttonClick.addEventListener('click', function(e) {
  var t = document.getElementById('t');

  var row = t.insertRow(0);
  var cell3 = row.insertCell(0);
  var cell4 = row.insertCell(0);


  row.insertCell().innerHTML = fild.value;

  row.insertCell().innerHTML = '<input type="button" value="Удалить" class="del"  />';

  var del = document.getElementsByClassName('del');
  //del.addEventListener('click', function(el){
  var str = document.querySelectorAll('#table tr');
  for (var i = 0; i < del.length; i++) {
    del[i].addEventListener('click', function(but) {
      var trq = this.parentNode.parentNode;
      trq.remove();
    });
  }

  fild.value = "";

})

<html>

<head>
  <meta charset="utf-8">
</head>

<body bgcolor="lightblue">
  <center>

    <table border="1" cellspacing="5" bgcolor="white" height="auto" width="auto" cellpadding="2">
      <tr>
        <th rowspan="2">Поле ввода</th>
        <th rowspan="2">Поле вывода</th>

      </tr>
      <tr>

      </tr>
      <tr>
        <td><input type="text" id="fild"></td>
        <td><output type="text" id="summa"></td>
            </tr>
            <tr>
                <th colspan="5" height="30">
                <input type="submit" value="Создать строку" id= buttonClick onclick="">
            </tr>   
        </table>
        <br><div id="table">
        <table border="1" cellspacing="5" bgcolor="white"
            height="auto" width="auto" cellpadding="5" id="TableScore">
            <caption><b>таблица</b></caption>
            <tr>
                <th width="auto" >Ячейка</th>           
                <th width="auto" >Ячейка</th>
                <th width="auto" >Сумма</th>
                <th width="auto" >Ячейка</font></th>
            </tr>
    <tbody id="t">
        </tbody>        
        </table>
        </div>

    </body>
    </html>

Добрый день, есть вопрос, как сделать чтобы при создании новой строки в таблице ,число из ячейки "сумма" в таблице складывалась и выводилась в поле вывода ( id="fild")

Answer 1

как сделать чтобы при создании новой строки в таблице ,число из ячейки "сумма" в таблице складывалась и выводилась в поле вывода ( id="fild")

Думаю формулировка ошибочная, должно быть

как сделать чтобы при создании новой строки, все числа из ячеек "сумма" -- складывались и выводилась в "Поле вывода" ( id="summa")

Если я понял правильно, то предлагаю для ячеек "сумма" добавить класс sum-costyl, а для кнопки удалить добавить data-value в который будет записываться число ячейки "сумма"

Вот сам код:

var counter = 1;
var summaOut = document.getElementById('summa');

var table = document.querySelector('TableScore');
buttonClick.addEventListener('click', function(e) {
  var t = document.getElementById('t');

  var row = t.insertRow(0);
  var cell3 = row.insertCell(0);
  var cell4 = row.insertCell(1);
  var cell5 = row.insertCell(2);
  cell5.setAttribute("class", "sum-costyl");
  cell5.innerHTML = fild.value;
  row.insertCell(3).innerHTML = `<input type="button" value="Удалить" class="del" data-value=${cell5.innerHTML}  />`;

  var sumTr = document.querySelectorAll('.sum-costyl');
  var strOut = 0

  sumTr.forEach(item => {
    strOut += +item.textContent
  })

  summaOut.textContent = strOut
  fild.value = "";

})

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('del')) {
    summaOut.textContent = (+summaOut.textContent) - (+e.target.getAttribute('data-value'))
    e.target.closest('tr').remove()
  }
})

<table border="1" cellspacing="5" bgcolor="white" height="auto" width="auto" cellpadding="2">
  <tr>
    <th rowspan="2">Поле ввода</th>
    <th rowspan="2">Поле вывода</th>

  </tr>
  <tr>

  </tr>
  <tr>
    <td><input type="text" id="fild"></td>
    <td><output type="text" id="summa"></td>
            </tr>
            <tr>
                <th colspan="5" height="30">
                <input type="submit" value="Создать строку" id= buttonClick onclick="">
            </tr>   
        </table>
        <br><div id="table">
        <table border="1" cellspacing="5" bgcolor="white"
            height="auto" width="auto" cellpadding="5" id="TableScore">
            <caption><b>таблица</b></caption>
            <tr>
                <th width="auto" >Ячейка</th>           
                <th width="auto" >Ячейка</th>
                <th width="auto" >Сумма</th>
                <th width="auto" >Ячейка</th>
            </tr>
    <tbody id="t">
        </tbody>        
        </table>
        </div>

Думаю смысл понятен

БЛОГ НА HUSL

Сумма ячеек таблицы на JavaScript

Ответы (1 шт):