Anzeige der Summe der Gesamtwerte der Textboxwerte im Label

Question

Ich möchte die Summe und die Herkunft der Leistungswerte für die Mitarbeiter anzeigen, die von der Abteilung Schraubstock gefiltert wurden.

Wenn ich der zweiten Zeile Werte hinzufüge, addieren sich die Werte zur Summe der ersten Zeile.

Kann mir jemand helfen, das Coding-Problem in meinem Code zu finden ??? Vielen Dank.

Dies ist meine Berechnungsansicht.

Dies ist PHP-Code:

     <tbody> 

         <?php 

         if(isset($_POST['filter'])){ 
         $department = $_POST['department']; 

         $query1 = "SELECT * FROM employee_personal_details e INNER JOIN department_details a ON e.dep_id=a.dep_id WHERE dep_name = '$department' "; 

         $employees = mysqli_query($connection,$query1); 

         while ($list = mysqli_fetch_array($employees)) { 



          echo "<tr>"; 
          echo "<td>".$list['emp_fullName']."</td>";   
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td><input type=\"text\" name=\"amount\" class=\"cal\" size=\"1\"></td>"; 
          echo "<td id=\"sum\"></td>"; 
          echo "<td id=\"prec\"></td>"; 


         } 
        } 
        ?> 

       </tbody> 

und das ist mein Javascript-Code:

  $(document).ready(function() { 

       $(".cal").each(function() { 
        $(this).keyup(function() { 
        //Initialize total to 0 
         var total = 0; 
         $(".cal").each(function() { 

          if (!isNaN(this.value) && this.value.length != 0 && this.value < 4) { 
           total += parseFloat(this.value); 
           precentage = (total/21)*100; 
         } 
        }); 

        $('#sum').html(total); 
        $('#prec').html(precentage.toFixed(2)); 
       }); 
      }); 
    }); 

Answer 1

Hier können Sie mit einer Lösung

$(document).ready(function() { 
 
    $('.cal').keyup(function(){ 
 
    var sum = 0; 
 
    var precentage = 0; 
 
    $('.cal').each(function(){ 
 
     var curVal = parseFloat($(this).val()); 
 
     if(!isNaN(curVal) && curVal.length != 0 && curVal < 4){ 
 
     sum += curVal; 
 
     precentage = (sum/21)*100; 
 
     } 
 
    }); 
 
    
 
    $('#sum').html(sum); 
 
    $('#prec').html(precentage.toFixed(2)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="amount" class="cal" size="1"> 
 
<input type="text" name="amount" class="cal" size="1"> 
 
<input type="text" name="amount" class="cal" size="1"> 
 
<input type="text" name="amount" class="cal" size="1"> 
 
<input type="text" name="amount" class="cal" size="1"> 
 

 
SUM: <div id="sum"></div> 
 
Precentage: <div id="prec"></div>

gehen

aktualisiert Lösung

$(document).ready(function() { 
 
    $('.cal').keyup(function(){ 
 
    var sum = 0; 
 
    var precentage = 0; 
 
    $(this).closest('tr').find('td').each(function(){ 
 
     var curVal = parseFloat($(this).find('.cal').val()); 
 
     if(!isNaN(curVal) && curVal.length != 0 && curVal < 4){ 
 
     sum += curVal; 
 
     precentage = (sum/21)*100; 
 
     } 
 
    }); 
 

 
    $(this).closest('tr').find('td').find('.sum').html(sum); 
 
    $(this).closest('tr').find('td').find('.prec').html(precentage.toFixed(2)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td> 
 
     SUM: <div class="sum"></div> 
 
     Precentage: <div class="prec"></div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td><input type="text" name="amount" class="cal" size="1"></td> 
 
    <td> 
 
     SUM: <div class="sum"></div> 
 
     Precentage: <div class="prec"></div> 
 
    </td> 
 
    </tr> 
 
</table>

Hope this Ihnen helfen.