Sum of Table Row using javascript

[melwinpinto]

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...

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

[Claus Mygind]

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;
 
}