please tell me how can i access value of gridview's cell in javascript

i have a gridview witch contain 4 databound columns and 2 templated column. in one of template column i placed a dropdownlist(witch contain number of items). and 2nd column of gri开发者_开发问答dview contains prices. so in last column i want that when i select value in dropdownlist that value should multiply with 2nd column's value of datagrid and place result in last column of gridview using java script.

please tell me what to do..

---

You can get the row and column cell data using javascript. Here is a nice article on

Traversing an HTML table with JavaScript and DOM Interfaces

Also take a look at table.rows

Sample Code

HTML

<table>
            <tr>
                <td>
                    100
                </td>
                <td>
                    <select id="sel1" onchange="GetRowInd(this);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    100
                </td>
                <td>
                    <select id="sel2" onchange="GetRowInd(this);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td>

                </td>
            </tr>
        </table>

javascript

function GetRowInd(selectbox)
    {
        var parentTr = selectbox.parentNode.parentNode;
        var secondCellVal = parseInt ( parentTr.cells[0].innerText , 10 );
        var comboVal = parseInt ( selectbox.value , 10 );

        parentTr.cells[2].innerText = secondCellVal * comboVal;
    }

You have to use textContent instead of innerText to work in FF.

jQuery solution

Remove the onchange event from the combo box and use the following function

$(function() {
            $(".selectbox").change ( function() {
                var comboVal = $(this).val();
                var parentTr = $(this).parents('tr');  
                var tdElem = parentTr.children('td');             
                var secondCellVal = tdElem.eq('0').text();

                tdElem.eq('2').text ( comboVal * secondCellVal );
            });
        });

---

You should be using ClientID property of the serverside controls and document.getElementById method to access your controls using javascript.

You may find this article helpful for generating neat ClientIDs.
This forum discussion may also show you the right way out.

Upd.:
Sample html:

<table>
    <tr>
        <td>cellValue</td>
        <td><span id="comboId">combo</span></td>
    </tr>
</table>

Sample javasricpt:

// alerts "cellValue"
alert(document.getElementById("comboId").parentNode.parentNode.cells[0].innerHTML);