CODEWITHSUNDEEP
javascriptmath
user1729894
user1729894

Reputation: 95

Sum of the rows and columns in a table by javascript

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>

Upvotes: 0

Views: 2120

Answers (1)

Erazihel
Erazihel

Reputation: 7615

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" />

Upvotes: 1

Related Questions