How can I display the sum of certain columns of a table in javascript?

Question

I do not understand javascript at all, I study as needed and I need help I need to sum up the values of certain columns of a table, the rows of which are marked with a checkbox For example: I mark the checkbox in two rows of the table and the sum of 3,4 and 5 columns is summed up and displayed somewhere on the page

Now I managed to find a piece of code that summarizes the value of the checked checkboxes in the form, and displays it on the page You just need to replace a part to show exactly the amount of columns

Here is this code

var
    $form = $("#out_form"),
  $allCheckboxes = $("input:checkbox", $form),
  $sumOut = $("#checked-sum"),
  $countOut = $("#checked-count");
  
$allCheckboxes.change(function() {
    var
    sum = 0,
    count = 0;
    $allCheckboxes.each(function(index, el) {
    var 
        $el = $(el),
        val;
    if ($el.is(":checked")) {
        count++;
      val = parseFloat($el.val());
      if (!isNaN(val)) {
        sum += val;
      }
    }
  });
  $sumOut.text(sum);
  $countOut.text(count);
});

HTML

       <form action="" method="post" id="out_form">
            <input type="hidden" name="next" value="{{next}}"/>
            <button type="submit">Check</button>
            <span id="checked-sum">0</span>
            <span id="checked-count">0</span>
            {%csrf_token%}
            <div class="table-view__container">
                <table class="table-view__table">
                    <tbody class="table-view__body">
                        {% for out in filter.qs %}
                        <tr>
                            <td>
                                <label class="custom_Label">
                                    <input type="checkbox" name="checked" value="{{ out.id }}">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                            <td>{{out.date|date:"d(D).m.Y"}}</td>
                            <td>{{out.ts}}</td>
                            <td>{{out.pl}}</td>
                            <td>{{out.rem}}</td>
                            <td>{{out.comment}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>

It is necessary to sum these 3 columns:

...
<td>{{out.ts}}</td>
<td>{{out.pl}}</td>
<td>{{out.rem}}</td>
...

Answer 1

JavaScript can be confusing, its definetely not an easy programming language. Sorry for not using your code, but I think its overcomplicating things.

So mainly what this code does is to trigger functions, using event handlers, that sum up the result variable and then show the result in a <span> tag.

I will explain a little bit the coding

• boxOne.addEventListener('change', () => { The boxOne variable is the first checkbox, so when JavaScript sees a change in this element it triggers the function.

• table.rows[0].cells[1].innerHTML This returns the string inside the first row and second cell to the right of the table.

• parseInt() is necessary to use because we need to sum up integers not strings.

• boxOne.checked ? result += sum : result -= sum; This is a ternary opertator which is asking: is the first checkbox checked? .. If so do result += sum if not do result -= sum

Try the following snippet

 var table = document.getElementById('table'), boxOne = document.getElementById('box1'), boxTwo = document.getElementById('box2'), show = document.getElementById('showResult'), result = 0; boxOne.addEventListener('change', () => { var firstValue = parseInt(table.rows[0].cells[1].innerHTML), secondValue = parseInt(table.rows[0].cells[2].innerHTML), sum = firstValue + secondValue; boxOne.checked ? result += sum : result -= sum; show.innerHTML = result; }); boxTwo.addEventListener('change', () => { var firstValue = parseInt(table.rows[1].cells[1].innerHTML), secondValue = parseInt(table.rows[1].cells[2].innerHTML), sum = firstValue + secondValue; boxTwo.checked ? result += sum : result -= sum; show.innerHTML = result; });

 td { border: 1px solid #dddddd; text-align: left; width:50px; text-align:center; } span{ font-size:20px; }

 <table id="table"> <tr> <td><input type="checkbox" id="box1" /></td> <td>1</td> <td>2</td> </tr> <tr> <td><input type="checkbox" id="box2" /></td> <td>3</td> <td>4</td> </tr> </table> <br> <br> <span>Result: </span><span id="showResult">0</span>