0

The function below does calculate when a number changes in each row, but at start up, I'd like to have it calculate all columns and rows and put the total of each row.

function sum_row_qty(el) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
      rowTotal += parseFloat(e.value)
    })
    parent.querySelector('.qty').value = rowTotal
  }
  /*else {
     $("#tableRows tr").each(function(row) {
         let sizes = row.querySelectorAll('.size_qty').forEach(function(e) {
           rowTotal += parseInt(sizes);
         });
       }
     }*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="tableRows">
  <tr>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
    <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
  </tr>
  
  
  <tr>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this);"></td>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this);"></td>
    <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
  </tr>
</tbody>
</table>

Thanks in advance!

onit
  • 2,275
  • 11
  • 25

1 Answers1

2

In the else block, call your function in a loop over an input in each row of the table.

Then call your function with no argument when the page is loaded, and it will execute this branch.

function sum_row_qty(el) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
      rowTotal += parseFloat(e.value)
    })
    parent.querySelector('.qty').value = rowTotal
  } else {
    document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
  }
}

window.addEventListener("load", () => sum_row_qty());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="tableRows">
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>


    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="6" onchange="sum_row_qty(this);"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="3" onchange="sum_row_qty(this);"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>
  </tbody>
</table>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • I've logged it, the else block runs, but there is no output. – onit Sep 29 '22 at 01:17
  • What did you log where? It's putting the correct totals in the table in my snippet – Barmar Sep 29 '22 at 13:59
  • Hi! Log went between ```else{``` and ```document...```. Saw the log, but no output. I'll continue investigating. Thank you! – onit Sep 29 '22 at 16:11