Sum of the rows and columns in a table by javascript

Question

How can I calculate the sum of the rows and columns in a table by javascript. I calculate the columns by using the code below

1) I repeat the code 3 times for 3 columns with a few changes. I think there is a more sophisticated way. How ?

2) How can I calculate the sum the rows in this table ?

  <HEAD>


      <script type="text/javascript">
  function findTotalcol(){
    var arr = document.getElementsByName('col1');
    var tot=0;
    for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
    tot += parseInt(arr[i].value);
          }
   document.getElementById('totalcol1').value = tot;
    }
  function findTotalcol2(){
  var arr = document.getElementsByName('col2');
  var tot=0;
  for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].value))
    tot += parseInt(arr[i].value);
     }
       document.getElementById('totalcol2').value = tot;
        }

  function findTotalcol3(){
  var arr = document.getElementsByName('col3');
  var tot=0;
  for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].value))
    tot += parseInt(arr[i].value);
    }
     document.getElementById('totalcol3').value = tot;
          }
    </script>


       </HEAD>                                     
         <BODY >                 

       <TABLE align="center" width="100%" border="1" cellspacing="0">
          <TR>           <!-- 1 -->
          <TD align="center" width="25%"> 

           <input onblur="findTotalcol()" type="text" name="col1" /><br>        

          </TD>  
                 <TD align="center" width="25%"> 

           <input onblur="findTotal2()" type="text" name="col2" /><br>        

          </TD> 

                      <TD align="center" width="25%"> 

          <input onblur="findTotalcol3()" type="text" name="col3" /><br>        

          </TD>   

                   <TD align="center" width="25%"> 

          Total row:<input onblur="" type="text" name="totalrow1" /><br>        

          </TD> 

          </TR>     
                  <TR>   <!-- 2 -->
          <TD align="center" width="25%"> 

         <input onblur="findTotalcol()" type="text" name="col1" /><br>        

          </TD>  

                     <TD align="center" width="25%"> 

           <input onblur="findTotalcol2()" type="text" name="col2" /><br>        

          </TD> 

                      <TD align="center" width="25%"> 

          <input onblur="findTotalcol3()" type="text" name="col3" /><br>        

          </TD>    
                        <TD align="center" width="25%"> 

          Total row:<input onblur="" type="text" name="totalrow2" /><br>        

          </TD> 


          </TR> 

                    <TR>  <!-- 3 -->
          <TD align="center" width="30%"> 

         <input onblur="findTotalcol()" type="text" name="col1" ><br>      

          </TD>  


           <TD align="center" width="30%"> 

           <input onblur="findTotalcol2()" type="text" name="col2" /><br>        

          </TD> 

                      <TD align="center" width="30%"> 

          <input onblur="findTotalcol3()" type="text" name="col3" /><br>        

          </TD>      

                            <TD align="center" width="25%"> 

         Total row: <input onblur="" type="text" name="totalrow3" /><br>        

          </TD> 

          </TR> 
                            <TR>    <!-- total column -->
          <TD align="center" width="30%"> 

      Total: <input type="text" name="totalcol1" id="totalcol1"/>    

          </TD>  

                     <TD align="center" width="30%"> 

      Total: <input type="text" name="totalcol2" id="totalcol2"/>    

          </TD>

               <TD align="center" width="30%"> 

     Total:  <input type="text" name="totalcol3" id="totalcol3"/>    

          </TD>


          </TR> 

          </TABLE>

Erazihel · Accepted Answer · 2017-03-23 14:16:41Z

1

JS

function findTotal(colName, totalColName) {
    var arr = document.getElementsByName(colName);
    var tot = 0;
    for(var i = 0; i < arr.length; i++) {
        if(parseInt(arr[i].value)) {
            tot += parseInt(arr[i].value);
        }

        document.getElementById(totalColName).value = tot;
    }
}

HTML

<input onblur="findTotal('col2', 'totalCol2')" type="text" name="col2" />

answered Mar 23, 2017 at 14:16

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1729894 Over a year ago

Thank you for your help. But it didn't work . I write <input> tags for each cell like below. Where is my mistake ? <TD align="center" width="25%"> <input onblur="findTotal('col1', 'totalCol1')" type="text" name="col1" /> </TD> <TD align="center" width="25%"> <input onblur="findTotal('col2', 'totalCol2')" type="text" name="col2" /> </TD> <TD align="center" width="25%"> <input onblur="findTotal('col3', 'totalCol3')" type="text" name="col3" /><br> </TD> etc...

Collectives™ on Stack Overflow

Sum of the rows and columns in a table by javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related