How to sum table columns and rows using JQuery?

Question

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!

Barmar · Accepted Answer · 2022-09-28 23:55:46Z

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>

answered Sep 28, 2022 at 23:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

onit Over a year ago

I've logged it, the else block runs, but there is no output.

Barmar Over a year ago

What did you log where? It's putting the correct totals in the table in my snippet

onit Over a year ago

Hi! Log went between else{ and document.... Saw the log, but no output. I'll continue investigating. Thank you!

Collectives™ on Stack Overflow

How to sum table columns and rows using JQuery?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related