locked
Jquery Help Needed RRS feed

  • 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
    

    Wednesday, December 16, 2015 4:48 PM

Answers

  • User61956409 posted

    Hi krishnada25,

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

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

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

    According to your requirements, I create the following sample for your reference.

    <table>
        <tr>
            <th>coloum1</th>
            <th>coloum2</th>
            <th>coloum3</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td flag="0"></td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td flag="0"></td>
        </tr>
    </table>
    
    $("table tr td:nth-child(3)").dblclick(function () {
    
        var f = $(this).attr("flag");
        //alert(f);
        switch (f) {
            case "0":
                $(this).empty();
                $(this).text("X");
    
                $(this).css("background-color", "");
                $(this).css("background-color", "green");
    
                $(this).attr("flag", "1");
                break;
    
            case "1":
                $(this).empty();
                $(this).text("X");
    
                $(this).css("background-color", "");
                $(this).css("background-color", "red");
    
                $(this).attr("flag", "2");
                break;
    
            case "2":
                $(this).empty();
                $(this).css("background-color", "");
                $(this).attr("flag", "0");
                break;
    
        }
    });
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2015 4:20 AM