how can i calculate total value in a table row with javascript in visualforce page?

Question

i have a table with 3 column in visualforce page there is one input value and others are output value. When input value is changes, input value and second column value must be multiplied and the third column must show the result for per row. in table i'm using <apex:repeat> and <tr>, <td> tags so how can i do this? thanks.

Answer 1

Yes, Javascript will allow you to get this done. Roughly, you'll want to:

1. create an event listener on the change event of the input control
2. on input change, get the input value and second column value. If input and second column values are numeric, multiply them and display in column 3.
3. if input controls have initial values on page load, after page load, iterate over all rows. For each row, get the input value and second column value. If input and second column values are numeric, multiply them and display in column 3.

Javascript lets you identify DOM elements (i.e. table rows & columns) via selectors. You may need to make some slight changes in your HTML in order to make your life easier when using selectors to navigate the table.

The exact implementation will depend somewhat on the details of your Visualforce page, what Javascript libraries you choose to use, etc.

Answer 2

i changed my code like this and it works.

vf page:

<apex:input id="qua" onchange="calc(this)"/>

js code:

function calc(p){
    var qua = p.value;
    var row = p.parentNode.parentNode;
    var pack = row.cells[6].innerHTML;        
    row.cells[7].innerHTML = qua * pack;
}