javascript - 在标签中显示运行总计文本框值的总和

Question

我想显示部门 vise 过滤的员工的绩效值的总和和出身。

当我将值添加到第二行时，这些值将添加到第一行的总和中。

有人可以帮我找出代码中的编码问题吗？？？谢谢。

这是我的计算 View 。

这是 PHP 代码:

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

这是我的 javascript 代码:

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

给你一个解决方案

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

更新的解决方案

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

希望对您有所帮助。