Question

输入字段是动态的，将根据用户要求从PHP添加。

多个输入字段的总和已实时计算并显示在特定类中。

现在，我想limit计算到100或特定数字。如果计算达到100，那么如何stop或disable填充数据？

$(document).on('blur', '.m_add', function(){  
  var sum = 0;
  $(".m_add").each(function(){
    sum += +$(this).html();
  });
  $(".total").html(sum);
});

table{
  width:100%;
}
table th{
  width:30%;
}
table td, table th {
  border: 1px solid #ddd;
  padding: 4px; }

table tr:nth-child(even) {
  background-color: #e7e7e7; }

table tr:hover {
  background-color: #0E539A; }

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>
</html>

Answer 1

对if值使用sum条件：

if(sum <=100){
   $(".total").html(sum);
}

$(document).on('blur', '.m_add', function() {
  var sum = 0;
  $(".m_add").each(function() {
    sum += +$(this).html();
  });
  if (sum <= 100) {
    $(".total").html(sum);
  }
});

table {
  width: 100%;
}

table th {
  width: 30%;
}

table td,
table th {
  border: 1px solid #ddd;
  padding: 4px;
}

table tr:nth-child(even) {
  background-color: #e7e7e7;
}

table tr:hover {
  background-color: #0E539A;
}

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>

</html>

Answer 2

您可以检查总和小于或等于100，然后加到总计中，否则将输入值留空

$(document).on('blur', '.m_add', function(){  
  var sum = 0;
  $(".m_add").each(function(){
    sum += +$(this).html();
  });
  if(sum<=100){
    $(".total").html(sum);
  } else{
    $(this).html('');
  }
});

table{
  width:100%;
}
table th{
  width:30%;
}
table td, table th {
  border: 1px solid #ddd;
  padding: 4px; }

table tr:nth-child(even) {
  background-color: #e7e7e7; }

table tr:hover {
  background-color: #0E539A; }

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>
</html>

如何将计算限制为特定数量

2 个答案: