代码之家 › 专栏 › 技术社区 › Dipak

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

html jquery

Dipak · 技术社区 · 6 年前

输入字段是动态的,将根据用户需求从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>

2 回复 | 直到 6 年前

Bhushan Kawadkar 6 年前

您可以检查sum小于或等于100,然后添加到total,否则将输入值设为空

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

Ankit Agarwal 6 年前

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