Sum of Table Row using javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • melwinpinto
    New Member
    • Nov 2014
    • 1

    Sum of Table Row using javascript

    HI I am In the finishing stage of this project, but this wall stands in front of me...I have table which displays data from the database, using forloop and arraylist variables.. and the user enters one col value which is left empty(I have given it all as Input edit box to edit if required) and the last col should show the result of that particular row..Please Help me...


    Code:
    	<table id="results" border="1" width="100%"> <tr> <th align="center">Sl No</th> <th align="center">PName</th> <th align="center">Pcode</th> <th align="center">OB</th> <th align="center">Receipt</th> <th align="center">Total</th> <th align="center">Price</th> <th align="center">Closing Balance</th> <th align="center">Amount</th> </tr> <tr> <%
    						int count=0;
    							
    							for (int i = 0; i < pc.size(); i++) {
    
    								Object[] p = new Object[pc.size()];
    								Object[] n = new Object[pc.size()];
    								Object[] o = new Object[pc.size()];
    								Object[] r = new Object[pc.size()];
    								
    								Object[] pr = new Object[pc.size()];
    								Object[] t = new Object[pc.size()];
    
    								p[0] = pc.get(i);
    								n[0] = pn.get(i);
    								o[0] = A_ob.get(i);
    								r[0] = A_receipt.get(i);
    								
    								pr[0] = A_price.get(i);
    								t[0] = A_tot.get(i);
    								
    								
    								
    						%> <td align="center"><%=i+1 %></td> <td align="center"><input type="edit" name="pname" value="<%=pn.get(i)%>"  readonly> </td> <td align="center"><input type="edit" name="pcode" value="<%=pc.get(i)%>" readonly></td> <td align="center"><input type="edit" name="ob" value="<%=A_ob.get(i)%>" readonly></td> <td align="center"><input type="edit" name="receipt" value="<%=A_receipt.get(i)%>" readonly></td> <td align="center"><input type="edit" name="total" value="<%=A_tot.get(i)%>" readonly></td> <td align="center"><input type="edit" name="price" value="<%=A_price.get(i)%>" readonly></td> <td align="center"><input type="edit" name="close" id="<%=i%>" value=''></td> <td align="center"><input type="edit" name="total" value="0" readonly></td> </tr> <%
    						}
    					%> </table>
    Last edited by Rabbit; Nov 7 '14, 04:13 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571

    #2
    Code:
    var dataArrayToBeStreamed;
    
    //add table to form
    //this could be pre-defined when the form is streamed out.
    //just add a <tbody></tbody> tag to the table so you can reference it.
    document.getElementById("formOnWhichTableIsDisplayed").innerHTML = '<table id="results" border="1" width="100%"><tbody id="resultsBody"></tbody></table>'; 
    
    for (var i = 0; i < dataArrayToBeStreamed.length; i++ )
    {
    	// step 1 add row to table
        tr = tbody.insertRow(tbody.rows.length);
    	
    	// step 2 add cells to this row
    	td = tr.insertCell(tr.cells.length);
    
    	// step 3 add content to cell
    	td.setAttribute("align", "center");
    	td.innerHTML =	'<input'+
    					' type="text"'+ 
    					' id="Quantity'+i+'"'+
    					' maxLength=6' 
    					' size=5'
    					' onChange="calcTotal('+i+');"'+
    					' />';
    //repeat steps 2 and 3 for additonal cells
    
    //repeat step 1 for additonal rows, then follow with steps 2 and 3 to fill in row
    
    }
    
    function calcTotal(rowNumber) 
    {
    	//getting the row number from the onChange handler you can now do the calc on this row.
    	document.getElementById("Total"+rowNumber).value = document.getElementById("Quanity"+rowNumber).value * document.getElementById("Price"+rowNumber).value;
    
    }

    Comment

    Working...