Get selected rowIndex of gridview using javascript

Question

I want to get the selected rowindex from the gridview. In the gridview there are 5 columns ID, name, model, code and amount. It also contains an image, which when clicked opens a popup window by which I can assign values in ID,name,model and code. Problem is that I can't assign proper values in each rows after clicking image and selecting the row in popup window. For that I need to get the selected index where the image is clicked.

Here is the gridview Code.

<asp:GridView ID="grvSalesDetails" runat="server" AutoGenerateColumns="False" CellPadding="4"
    CssClass="mGrid" ForeColor="#333333" GridLines="None" OnRowDeleting="grvSalesDetails_RowDeleting"
    ShowFooter="True" Style="text-align: left" Width="100%" SelectedRowStyle="myselection">
    <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="SNo" />
        <asp:TemplateField HeaderText="Machine ID">
            <ItemTemplate>
                <asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
                <img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
                    id="imgMachine" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtMName" runat="server" Width="120px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Model">
            <ItemTemplate>
                <asp:TextBox ID="txtMModel" runat="server" Width="80px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Code">
            <ItemTemplate>
                <asp:TextBox ID="txtMCode" runat="server" Width="70px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Amount">
            <ItemTemplate>
                <asp:TextBox ID="txtMAmount" runat="server" Width="90px"></asp:TextBox>
            </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
                <asp:Button ID="AddNewRow" runat="server" CssClass="btnSearch" OnClick="AddNewRow_Click"
                    Text="Add New Row" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True" />
    </Columns>
    <FooterStyle BackColor="#102040" CssClass="mGrid" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

and this is the javascript

<script type="text/javascript">
var popup;
function SelectMachineCode() {
    var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
    popup = window.open("machine_lookup.aspx", "Popup", "width=600,height=300");
    popup.focus();
}

function OpenMachineLookUp() {
    var _PageUrl = "machine_lookup.aspx";
    OpenNewWindow(_PageUrl, "Machine Information", "800", "500");
}

function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
    var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');            
    var rowId=;//selected rowindex here            

        var MID = grvSalesDetails.rows[rowId].cells[1].children[0];
        MID.value = ID;
        var MName = grvSalesDetails.rows[rowId].cells[2].children[0];
        MName.value = Name;
        var MModel = grvSalesDetails.rows[rowId].cells[3].children[0];
        MModel.value = Model;
        var MCode = grvSalesDetails.rows[rowId].cells[4].children[0];
        MCode.value = Code;           
}

I've tried using hiddenfields, parentnode, childnode but couldn't get the selected rowindex.

Solution

I got a way to fetch rowindex of gridview when clicking an image.

<ItemTemplate>
    <asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
    <img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
        id="imgMachine" />                                                               
</ItemTemplate>

By passing row's property to javascript function and storing index in hiddenValueField I was able to solve the problem.

<script type="text/javascript">
    var popup;
    function SelectMachineCode(row) {
        var rowData = row.parentNode.parentNode;
        var rowIndex = rowData.rowIndex;
        document.getElementById("<%=hdValue.ClientID %>").value = rowIndex;
        popup = window.open("/Machinery/lookup/machine_lookup.aspx", "Popup", "width=800");
        popup.focus();
    }
    function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
        var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
        var rowIndexs = document.getElementById("<%=hdValue.ClientID %>").value;
        var ri = parseInt(rowIndexs);
        var MID = grvSalesDetails.rows[ri].cells[1].children[0];
        MID.value = ID;
        var MName = grvSalesDetails.rows[ri].cells[2].children[0];
        MName.value = Name;
        var MModel = grvSalesDetails.rows[ri].cells[3].children[0];
        MModel.value = Model;
        var MCode = grvSalesDetails.rows[ri].cells[4].children[0];
        MCode.value = Code;
    }
</script>