title: Sum table rows and columns
body: <p>I have a table and I want to allow submitting the form if and only if the total of each row must be =100 not less nor more
  and the total of each column must be &lt;=100 and not more than 100</p>
  <p>This is the old scenario each row and each column must be = 100.
  <a href="https://i.stack.imgur.com/sk0kf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sk0kf.png" alt="enter image description here" /></a></p>
  <p>Demo CODE:</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function(){
  disableSave();
  
  $(&quot;.sum&quot;).on(&quot;input&quot;, function() {
    sumThisClass(&quot;1&quot;);
    sumThisClass(&quot;2&quot;);
    sumThisClass(&quot;3&quot;);
    sumThisClass(&quot;4&quot;);
    sumThisClass(&quot;5&quot;);
    sumThisClass(&quot;6&quot;);
    sumThisClass(&quot;7&quot;);
    validateForm();
  });
  
  function validateForm() {
    var hasError = $(&quot;.error&quot;).length &gt; 0;
    if (hasError) {
      disableSave();
      return;
    }
    
    var expectedTotal = $(&quot;.total&quot;).length * 100;
    console.log(expectedTotal, getCurrentTotal());
    if (expectedTotal == getCurrentTotal()) {
      enableSave();
    }
    else {
      disableSave();
    }
  }
  
  function getCurrentTotal() {
      var sumTotal = 0;
      $(&quot;.total&quot;).each(function (index, el) {
      var elValue = parseInt($(el).text());
      if (!isNaN(elValue)) {
        sumTotal += parseInt($(el).text());
      }
    });
    return sumTotal;
  }
  
  function disableSave() {
    $(&quot;#btn-save&quot;).prop(&quot;disabled&quot;, true);
  }
  
  function enableSave() {
    $(&quot;#btn-save&quot;).prop(&quot;disabled&quot;, false);
  }
  
  function sumThisClass(className) {
  
    var sumTotal = 0;
    $(&quot;.&quot; + className).each(function(index, el) {
      var elValue = parseInt($(el).val());
      if (!isNaN(elValue)) {
        sumTotal += parseInt($(el).val());
      }
    });
    
    $(&quot;.sum-&quot; + className).text(sumTotal);
  
    if (sumTotal &gt; 100) {
      $(&quot;.sum-&quot; + className).append(&quot;&lt;div class='error'&gt;cannot be greater than 100&lt;/div&gt;&quot;);
    }
  
  }
  });
  &lt;/script&gt;
  &lt;form action=&quot;test.php&quot; method=&quot;post&quot;&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;Total&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 1 5&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 1 6&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 1 7&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td class=&quot;total sum-1&quot;&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 2 5&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 2 6&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type=&quot;number&quot; class=&quot;sum 2 7&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
      &lt;/td&gt;
      &lt;td class=&quot;total sum-2&quot;&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;TOTAL&lt;/td&gt;
      &lt;td class=&quot;total sum-5&quot;&gt;&lt;/td&gt;
      &lt;td class=&quot;total sum-6&quot;&gt;&lt;/td&gt;
      &lt;td class=&quot;total sum-7&quot;&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;input type=&quot;submit&quot; name=&quot;save&quot; value=&quot;SAVE&quot; id=&quot;btn-save&quot;/&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/1c4jhyL0/" rel="nofollow noreferrer"><strong>Demo Link</strong></a></p>
  <p>I tried to change it but I couldn't succeed.</p>