Double Counting Table Cell in Loop jQuery-CodePudding

I am using the below code to loop through the cells in my table which contain an input and totaling them up to display in the total column. Ultimately the #testerField will be changes to $this and fired off of a jQuery listener over the whole table.

The table structure is something like this:

Non Input Cell -> Non Input Cell -> Cell with Input (x8) -> Total Cell

For some reason, it keeps double counting (iterating over) the first cell in the loop. Why is this occurring?

sumFunction = function() {
    var row = $("#testerField").closest("tr");
    var lastCell = row.find("td:last");

    var total = 0;

    row.add('td:has(:input)').each(function() {
        var value = $(this).find(":input").val();
        
        if (value > 0) {
            total = Number(total)   Number(value);
        }  
    });

    lastCell.html(total);
}

Here is the HTML of one Table Row

                    <tr>
                        <td>1</td>
                        <td>Trouble</td>
                        <td><input id="testerField" type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td></td>
                    </tr>

CodePudding user response：

Consider the following example.

$(function() {
  function calcSum() {
    var row = $("#testerField").closest("tr");
    var lastCell = $("td:last", row);
    var total = 0;
    $("td > input", row).filter(function() {
      return $(this).val() > 0;
    }).each(function(i, el) {
      total  = parseInt($(el).val());
    });
    lastCell.html(total);
  }

  $("table").ready(calcSum);
  $("table input").change(calcSum);
});

table input {
  width: 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>Trouble</td>
    <td><input id="testerField" type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td><input type="number" /></td>
    <td></td>
  </tr>
</table>

Here we iterate over each input in the row and only if they have a Value higher than 0.

CodePudding user response：

function calcSum() {
    var row = $("#testerField").closest("tr");
    var lastCell = row.find("td:last");
    var total = 0;
    $("td > input", row).each((i, el) => total  = Number($(el).val()));
    
    lastCell.html(total);
    console.log(total);
  }

  $("table").ready(calcSum);
  $("table input").change(calcSum);

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table>
        <tr>
                        <td>1</td>
                        <td>Trouble</td>
                        <td><input id="testerField" type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td><input type="number"/></td>
                        <td></td>
                    </tr>
</table>