javascript - Update total qty when a row is deleted in a dynamic table

Question

In my code below user can select a color and add it to a dynamic table. qty of the selected colors is displayed on every row and total qty of all colors is displayed at the bottom of the table. user can also delete any row onclick. My question is that how the total qty can be updated if a row is deleted.

      <table id="colorTable">
          <tr>
            <th name="color[]" id="color">Color</th>
          </tr>
          <tr>
               <td id="color-des">
                  <select id="color-part-list" data-placeholder="Rejected Parts">
                      <option value="Red">Red</option>
                      <option value="Grey">Grey</option>
                      <option value="Blue">Blue</option>
                      <option value="Yellow">Yellow</option>
                      <option value="White">White</option>
                      <option value="Black">Black</option>
                  </select>
               </td>
          </tr>
          </table>

          <div class="button-div">
              <input type="button" value="Add The Color" onclick="colorddRow()" />
          </div>

          <table id="dataTable1-color-parts">
             <tr>
               <th>Name of the Rejected Parts</th>
               <th id="colorparts-qty">Number of Issues</th>
             </tr>  
          </table>

          <table id="color-parts-total-qty-table" style="padding:20px;">
              <tr>
                  <th>Total Number of Colors: </th>
                  <th><div id="col-parts-total-qty"></div</th>
              </tr>  
          </table>
       </table>



       <script>
            function colorddRow() {
            var colorpartsrows = "";    
            var colparts = $('#color-part-list').val();          

            // Sum of the rejected colors qty in every row
            var colpartssum = $("#color-part-list :selected").length;

            // Total Sum
            var td = document.querySelectorAll('#dataTable1-color-parts > 
            tbody > tr > td:last-child');
            
            var total = colpartssum;

                for (var i = 0; i < td.length; i++)
                {
                    total += parseInt(td[i].innerText);
                }

            document.getElementById('col-parts-total-qty').innerText = total;
            console.log(total);

            

            // Creates the dynamic table Onclick
            colorpartsrows += "<tr><td><button class=removeDepIt>Delete</button></td><td>" + colparts +
            "</td><td>" + colpartssum + "</td></tr>";
            // Adds the rows to the dynamic table
            $(colorpartsrows).appendTo("#dataTable1-color-parts tbody");



            // Delete Rows Onclick
            $("#dataTable1-color-parts").on('click', '.removeDepIt', function() {
                var row = $(this).closest('tr');
                var prev = row.prev();
                row.remove();
            });
            }
       </script>

question from:https://stackoverflow.com/questions/65838167/update-total-qty-when-a-row-is-deleted-in-a-dynamic-table

Answer 1

That calculation already exist in your code! Just re-use it.

I made a function with the part of your code where you were calculating the total...

And I called it after the td is appended AND after one has been removed.

About the remove function... It should not be in the colorddRow function. It's an event handler declaration. If inside, everytime you add a row, it registers the handler again.

// The total function
function calculateTotal(){
  // Total Sum
  var td = document.querySelectorAll(
    "#dataTable1-color-parts > tbody > tr > td:last-child"
  );

  var total = 0;  //colpartssum;

  for (var i = 0; i < td.length; i++) {
    total += parseInt(td[i].innerText);
  }

  document.getElementById("col-parts-total-qty").innerText = total;
  console.log(total);
}

function colorddRow() {
  var colorpartsrows = "";
  var colparts = $("#color-part-list").val();

  // Sum of the rejected colors qty in every row
  var colpartssum = $("#color-part-list :selected").length;

  // Creates the dynamic table Onclick
  colorpartsrows +=
    "<tr><td><button class=removeDepIt>Delete</button></td><td>" +
    colparts +
    "</td><td>" +
    colpartssum +
    "</td></tr>";
  // Adds the rows to the dynamic table
  $(colorpartsrows).appendTo("#dataTable1-color-parts tbody");

  calculateTotal();  // Calculate the total here

}  // The add row function ends here.


// Delete Rows Onclick
$("#dataTable1-color-parts").on("click", ".removeDepIt", function () {
  var row = $(this).closest("tr");
  var prev = row.prev();
  row.remove();
  calculateTotal();  // Calculate the total here
});