Блог

В моем коде ниже пользователь может выбрать цвет и добавить его в динамическую таблицу. количество выбранных цветов отображается в каждой строке, а общее количество всех цветов отображается в нижней части таблицы. пользователь также может удалить любую строку одним щелчком мыши. Мой вопрос заключается в том, как общее количество может быть обновлено, если строка удалена.

       <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>
 

Это вычисление уже существует в вашем коде! Просто используйте его повторно.

Я создал функцию с той частью вашего кода, где вы вычисляли общее количество…

И я вызвал его после td добавления и после удаления.

О функции удаления… Этого не должно быть в colorddRow функции. Это объявление обработчика событий. Если внутри, каждый раз, когда вы добавляете строку, он снова регистрирует обработчик.

 // 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
});