Jquery Help Needed

Question

User1051635487 posted

so I am trying to double click on a gridview  cell

1) If cell is empty -->Double Click --> Green "X"

2) If Green X -->Double Click --> Red "X"

3) if Red X --> Double Click -->  "Empty"

I am able to do 1 and 2 but I am stuck with 3. Can you plz see what can I do to achieve 3

$(document).ready(function () {
            alert("Test");
            //change to pointer instead of cursor
            $("#<%=GridView1.ClientID%> tr:has(td)").hover(function (e) {
                $(this).css("cursor", "pointer");                
            });
            
            $('#GridView1>tbody>tr>td').dblclick(function (e) {
                //set current selected column
                var selTD = $(e.target).closest("td");
                //remove previous css class
                $("#<%=GridView1.ClientID%> td").removeClass("selected");                
                var $currentCellText = selTD.text();
                if ($.trim($currentCellText) == "") {
                    selTD.text("X");
                    //add selected css class
                    selTD.addClass("firsttime");
                }
                else if ($.trim($currentCellText) == "X") {

                    selTD.addClass("secondtime");

                                                }

               
                
                //get row index

                var iRowIndex = $(this).closest("tr").prevAll("tr").length;
                //get column index
                var colIndex = $(this).parent().children().index($(this));

                //get row id to update
                var rowID = $('#<%=GridView1.ClientID%>  tr:eq(' + iRowIndex + ') > td:eq(0)').text();

                PageMethods.ChangeValue(rowID, onSucceed);
                            
            });
        });

        function onSucceed(results, currentContext, methodName) {
            alert("success");
        }

       
    </script>
   <style type="text/css">
        .firsttime
        {
            background-color: green;
        }
        .secondtime 
        {
            background-color: red;
        }
        .NoClass
        {
            background-color:white;

        }
    </style>


<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                runat="server" AutoGenerateColumns="false" >
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="ID" />
                    <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
                </Columns>
            </asp:GridView>


 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
            dt.Rows.Add(1, "John", "")
            dt.Rows.Add(2, "Ram", "India")
            dt.Rows.Add(3, "Suzanne Mathews", "France")
            dt.Rows.Add(34, "Robert Schidner", "Russia")
            dt.PrimaryKey = Nothing
            Session("dt") = dt
            Me.BindGrid()
        End If
    End Sub

    Public Sub BindGrid()
        GridView1.DataSource = TryCast(Session("dt"), DataTable)
        GridView1.DataBind()
    End Sub