By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,190 Members | 1,056 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,190 IT Pros & Developers. It's quick & easy.

Sum of Table Row using javascript

P: 1
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...


Expand|Select|Wrap|Line Numbers
  1.     <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> <%
  2.                         int count=0;
  3.  
  4.                             for (int i = 0; i < pc.size(); i++) {
  5.  
  6.                                 Object[] p = new Object[pc.size()];
  7.                                 Object[] n = new Object[pc.size()];
  8.                                 Object[] o = new Object[pc.size()];
  9.                                 Object[] r = new Object[pc.size()];
  10.  
  11.                                 Object[] pr = new Object[pc.size()];
  12.                                 Object[] t = new Object[pc.size()];
  13.  
  14.                                 p[0] = pc.get(i);
  15.                                 n[0] = pn.get(i);
  16.                                 o[0] = A_ob.get(i);
  17.                                 r[0] = A_receipt.get(i);
  18.  
  19.                                 pr[0] = A_price.get(i);
  20.                                 t[0] = A_tot.get(i);
  21.  
  22.  
  23.  
  24.                         %> <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> <%
  25.                         }
  26.                     %> </table>
Nov 7 '14 #1
Share this Question
Share on Google+
1 Reply


Claus Mygind
100+
P: 571
Expand|Select|Wrap|Line Numbers
  1. var dataArrayToBeStreamed;
  2.  
  3. //add table to form
  4. //this could be pre-defined when the form is streamed out.
  5. //just add a <tbody></tbody> tag to the table so you can reference it.
  6. document.getElementById("formOnWhichTableIsDisplayed").innerHTML = '<table id="results" border="1" width="100%"><tbody id="resultsBody"></tbody></table>'; 
  7.  
  8. for (var i = 0; i < dataArrayToBeStreamed.length; i++ )
  9. {
  10.     // step 1 add row to table
  11.     tr = tbody.insertRow(tbody.rows.length);
  12.  
  13.     // step 2 add cells to this row
  14.     td = tr.insertCell(tr.cells.length);
  15.  
  16.     // step 3 add content to cell
  17.     td.setAttribute("align", "center");
  18.     td.innerHTML =    '<input'+
  19.                     ' type="text"'+ 
  20.                     ' id="Quantity'+i+'"'+
  21.                     ' maxLength=6' 
  22.                     ' size=5'
  23.                     ' onChange="calcTotal('+i+');"'+
  24.                     ' />';
  25. //repeat steps 2 and 3 for additonal cells
  26.  
  27. //repeat step 1 for additonal rows, then follow with steps 2 and 3 to fill in row
  28.  
  29. }
  30.  
  31. function calcTotal(rowNumber) 
  32. {
  33.     //getting the row number from the onChange handler you can now do the calc on this row.
  34.     document.getElementById("Total"+rowNumber).value = document.getElementById("Quanity"+rowNumber).value * document.getElementById("Price"+rowNumber).value;
  35.  
  36. }
  37.  
Dec 8 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.