Question

我正在构建一个标记表，它将自动计算教师输入的总分。我尝试使用jquery代码执行此操作。在表中，行将由php动态添加以进行循环。我想要不同的行有不同的结果。在这种形式下，一位学生一行，学生列表动态添加到来自我数据库的表格行中。 请注意：对不同的行使用不同的ID或不同的类名，由于表行是动态产生的，因此无法正常工作。 My code output screenshot

        <html>
        <head>    
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
      <title>Auto Sum Table</title>

     </head>

      <body>
      <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
      <script type="text/javascript">
    $(document).on("change", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
    sum += +$(this).val();
    });
    $(".total").val(sum);
    });
      </script> 
    <table cellpadding="0" cellspacing="0">
      <tr>
    <td><p>1st subject</p></td>
   <td><p>2nd subject</p></td>
   <td><p>total mark</p></td>
    </tr>
    <tr>
  <td><input type="text" class="qty1" ></td>
  <td><input type="text" class="qty1" ></td>
  <td><input type="text" class="total"></td>
  </tr>
  <tr>
  <td><input type="text" class="qty1" ></td>
  <td><input type="text" class="qty1" ></td>
  <td><input type="text" class="total"></td>
   </tr>
   </table>

    </body>
     </html>

Answer 1

限制该行的计算。为此，您必须首先获取行（例如.closest()），其中更改后的.qty1是以下项的子代：

const row = $(this).closest("tr");

然后使用.find()获取实际数学的输入：

const quantites = row.find(".qty1");
const total = row.find(".total");

示例：

$(".qty1").on("input", function() {
    var row = $(this).closest("tr");
    var quantities = row.find(".qty1");
    
    var result = 0;
    quantities.each(function() {
      result += +this.value;
    });
    
    row.find(".total").val(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td><p>1st subject</p></td>
    <td><p>2nd subject</p></td>
    <td><p>total mark</p></td>
  </tr>
  <tr>
    <td><input type="text" class="qty1"></td>
    <td><input type="text" class="qty1"></td>
    <td><input type="text" class="total"></td>
  </tr>
  <tr>
    <td><input type="text" class="qty1"></td>
    <td><input type="text" class="qty1"></td>
    <td><input type="text" class="total"></td>
  </tr>
</table>

如何获得不同行的不同求和值

1 个答案: