berechnen Summe der Werte horzintal und vertikal von jquery

Question

Hallo Ich habe Form wie dieses und ich brauche die Gesamt nach dem Foto

<table class="table table-bordered table-hover"> 
    <thead> 
    <tr> 
     <td></td> 
    <td>Heading 0</td> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
    <td>Heading 4</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
      <td>P 1</td> 
     <td><input type="text" name="h[00]" id="00" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[01]" id="01" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[02]" id="02" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[03]" id="03" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[04]" id="04" placeholder="budget" class="med" required=""></td> 
<td><div class="total_p0"><input type="text" name="total_p0" value="total p 1"></div></td> 
    </tr> 
    <tr> 
      <td>P 2 </td> 

     <td><input type="text" name="h[10]" id="10" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[11]" id="11" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[12]" id="12" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[13]" id="13" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[14]" id="14" placeholder="budget" class="med" required=""></td> 
<td><div class="total_p1"><input type="text" name="total_p1" value="total p 2"></div></td> 
    </tr> 
    <tr> 
      <td>P 3 </td> 

     <td><input type="text" name="h[20]" id="20" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[21]" id="21" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[22]" id="22" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[23]" id="23" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[24]" id="24" placeholder="budget" class="med" required=""></td> 
<td><div class="total_p2"><input type="text" name="total_p2" value="total p 3"></div></td> 
    </tr> 
    <tr> 
      <td>P 4 </td> 

     <td><input type="text" name="h[30]" id="30" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[31]" id="31" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[32]" id="32" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[33]" id="33" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[34]" id="34" placeholder="budget" class="med" required=""></td> 
<td><div class="total_p3"><input type="text" name="total_p3" value="total p 4"></div></td> 
    </tr> 
    <tr> 
      <td>P 5</td> 

     <td><input type="text" name="h[40]" id="40" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[41]" id="41" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[42]" id="42" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[43]" id="43" placeholder="budget" class="med" required=""></td> 
     <td><input type="text" name="h[44]" id="44" placeholder="budget" class="med" required=""></td> 
<td><div class="total_p4"><input type="text" name="total_p4" value="total p 5"></div></td> 
    </tr> 
<tr> 
    <td></td> 
     <td><input type="text" name="total_h0" value="total heading 0"></td> 
     <td><input type="text" name="total_h1" value="total heading 1"></td> 
     <td><input type="text" name="total_h2" value="total heading 2"></td> 
     <td><input type="text" name="total_h3" value="total heading 3"></td> 
     <td><input type="text" name="total_h4" value="total heading 4"></td> 
     <td><input type="text" name="total_all" value="Total all"></td> 
</tr> 

    </tbody> 
    </table> 

Gesamt P1, P2, P3, P4, P5 als horzintal

berechnen

und insgesamt heading0, heading1, Heading2, Überschrift3, heading4

und die Gesamt alle

ich so etwas wie dies versucht, aber ich konnte es nicht vollständig

012.351.

<script type="text/javascript"> 
    $(document).ready(function() { 
    var partners = 5; 
    var headings = 5; 
    for (var p = 0; p < partners; p++) { 
     for (var i = 0; i < headings; i++) { 
      var pi = p+i; 
     } 
    } 
    }); 
</script> 

als

Answer 1

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".med").each(function() { 
     $(this).keyup(function() { 
      calculateSum(); 
     }); 
    }); 
}); 
     function calculateSum() { 
     var sum = 0; 
      //iterate through each textboxes and add the values 
      $(".med").each(function() { 
       //add only if the value is number 
       if (!isNaN(this.value) && this.value.length != 0) { 
        sum += parseFloat(this.value); 
       } 
      }); 

      var sumQ = []; 
      var headings = 5; 

       var sumQ = []; 
      for (var i=1; i<=headings; i++) { 
       sumQ[i] = 0; 
       $('td:nth-child('+(i+1)+')').find(".med").each(function() { 
        if (!isNaN(this.value) && this.value.length != 0) { 
         sumQ[i] += parseFloat(this.value); 
        } 
       }); 
      $("#h"+(i-1)).val(sumQ[i].toFixed(2)); 

      } 

      var sumP = []; 
       var partners = 5; 

       var sumQ = []; 
      for (var i=1; i<=partners; i++) { 
       sumP[i] = 0; 
       $('tr:eq('+i+')').find(".med").each(function() { 
        if (!isNaN(this.value) && this.value.length != 0) { 
         sumP[i] += parseFloat(this.value); 
        } 
       }); 
      $("#p"+(i-1)).val(sumP[i].toFixed(2)); 

      } 
      $("#sum").val(sum.toFixed(2)); 
     } 
</script> 

Answer 2

Ich glaube, Sie es wie dieses Beispiel wollte unten im Bild gezeigt?

$(function(){ 
 
    $('.med').on('change', function(){ 
 

 
     \t var colIndex = $(this).parent().prevAll().length; 
 
    \t \t var rowIndex = $(this).closest('tr').prevAll().length; 
 

 
      var columns = $(this).closest('tr').children('td'); 
 
      var colMax = columns.length - 1; 
 
      var rowTotal = 0; 
 

 
      for (var col = 1; col < colMax; col++) { 
 
       var colData = columns.eq(col).find('input').val(); 
 
       if (colData === undefined) { 
 
       \t rowTotal += 0; 
 
       } else { 
 
       rowTotal += (1 * colData); 
 
       } 
 
      } 
 

 

 
      var rows = $(this).closest('tbody').children('tr'); 
 
      var rowMax = rows.length - 1; 
 
      var colTotal = 0; 
 

 
      for (var row = 0; row < rowMax; row++) { 
 
       var rowData = rows.eq(row).children('td').eq(colIndex).find('input').val(); 
 
       if (rowData === undefined) { 
 
        colTotal += 0; 
 
       } else { 
 
        colTotal += (1 * rowData); 
 
       } 
 
      } 
 
      $('input[name=total_p' + rowIndex + ']').val(rowTotal); 
 
      $('input[name=total_h' + (colIndex-1) + ']').val(colTotal); 
 

 
      var totalHead = 0; 
 
      var totalP = 0; 
 
      $('input[name^=total_h]').each(function(){ 
 
       var data = isNaN($(this).val())?0:($(this).val() *1); 
 
       totalHead += data; 
 
      }); 
 

 
      $('input[name^=total_p]').each(function(){ 
 
       var data = isNaN($(this).val())?0:($(this).val() *1); 
 
       totalP += data; 
 
      }); 
 

 
      var totalall = totalHead + totalP; 
 
      $('input[name=total_all]').val(totalall); 
 
      console.log('total heading = ' + totalHead); 
 
      console.log('total P = ' + totalP); 
 
      console.log('total all = ' + totalall); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
     <tr> 
 
      <td></td> 
 
      <td>Heading 0</td> 
 
      <td>Heading 1</td> 
 
      <td>Heading 2</td> 
 
      <td>Heading 3</td> 
 
      <td>Heading 4</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>P 1</td> 
 
      <td> 
 
       <input type="text" name="h[00]" id="00" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[01]" id="01" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[02]" id="02" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[03]" id="03" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[04]" id="04" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <div class="total_p0"> 
 
        <input type="text" name="total_p0" value="total p 1"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>P 2 </td> 
 

 
      <td> 
 
       <input type="text" name="h[10]" id="10" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[11]" id="11" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[12]" id="12" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[13]" id="13" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[14]" id="14" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <div class="total_p1"> 
 
        <input type="text" name="total_p1" value="total p 2"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>P 3 </td> 
 

 
      <td> 
 
       <input type="text" name="h[20]" id="20" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[21]" id="21" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[22]" id="22" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[23]" id="23" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[24]" id="24" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <div class="total_p2"> 
 
        <input type="text" name="total_p2" value="total p 3"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>P 4 </td> 
 

 
      <td> 
 
       <input type="text" name="h[30]" id="30" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[31]" id="31" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[32]" id="32" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[33]" id="33" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[34]" id="34" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <div class="total_p3"> 
 
        <input type="text" name="total_p3" value="total p 4"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>P 5</td> 
 

 
      <td> 
 
       <input type="text" name="h[40]" id="40" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[41]" id="41" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[42]" id="42" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[43]" id="43" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="h[44]" id="44" placeholder="budget" class="med" required=""> 
 
      </td> 
 
      <td> 
 
       <div class="total_p4"> 
 
        <input type="text" name="total_p4" value="total p 5"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td> 
 
       <input type="text" name="total_h0" value="total heading 0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="total_h1" value="total heading 1"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="total_h2" value="total heading 2"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="total_h3" value="total heading 3"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="total_h4" value="total heading 4"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="total_all" value="Total all"> 
 
      </td> 
 
     </tr> 
 

 
    </tbody> 
 
</table>