Highlight Row on Gridview LinkButton Clicked with Confirmation Alert ASP.Net

Question

I have Delete button and confirm alert is working fine. But I want to color the BackColor of selected row prior to show alert. Its working fine and showing BackColor to Grey for View button because there is not alert for View button. But it does not show BackColor changed for Delete button as it alert first and on Yes, it goes to RowCommand event.

How to change backcolor prior alerting for delete message?

<asp:TemplateField HeaderText="Option">
    <ItemTemplate>
        <asp:LinkButton ID="btnEdit" CommandName="editRecord" Width="14px" Height="14px" aria-label="Left Align"
            CommandArgument='<%# Eval("DeptID") + "," + Eval("DeptName")%>' CssClass="" runat="server">
            <span class="glyphicon glyphicon-pencil" style="vertical-align:top;"></span>
        </asp:LinkButton>

        <asp:LinkButton ID="btnDelete" CommandName="deleteRecord" Width="14px" Height="14px" 
            OnClientClick="javascript:return confirm('Are you sure you want to Delete highlighted row?');"
            CommandArgument='<%# Eval("DeptID") + "," + Eval("DeptName")%>' CssClass="" runat="server">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        </asp:LinkButton>
    </ItemTemplate>
    <ItemStyle CssClass="col-md-1 col-sm-1 col-xs-1 grid-label-text-align grid-height-10"></ItemStyle>
</asp:TemplateField>

--Code Behind

protected void grdDept_RowCommand(object sender, GridViewCommandEventArgs e)
{
    lblMessage.Visible = false;

    GridViewRow gvr = (GridViewRow)(((LinkButton)e.CommandSource).NamingContainer);
    int RowIndex = gvr.RowIndex;
    grdDept.Rows[RowIndex].BackColor = System.Drawing.Color.LightGray; 

    if (e.CommandName == "editRecord")
    {
        string[] commandArgs = e.CommandArgument.ToString().Split(new char[] { ',' });
        string deptID = commandArgs[0];
        string deptName = commandArgs[1];

        hfDeptID.Value = deptID;
        txtDeptName.Text = deptName;
        //btnAdd.Text = "Update";
        panel1.Visible = true;
        lblMessage.Visible = false;
    }
    else if (e.CommandName == "deleteRecord")
    {
        string[] commandArgs = e.CommandArgument.ToString().Split(new char[] { ',' });
        string deptID = commandArgs[0];

        if (ChildRecordExist(int.Parse(deptID)) == false)
        {
            DepartmentClass dept = new DepartmentClass();
            dept.DeptID = int.Parse(deptID);

            TransactionOptions options = new TransactionOptions();
            options.IsolationLevel = System.Transactions.IsolationLevel.ReadCommitted;
            options.Timeout = new TimeSpan(0, 15, 0);

            using (TransactionScope tran = new TransactionScope(TransactionScopeOption.Required, options))
            {
                if (deptID != "")
                {
                    if (dept.Delete() == true)
                    {
                        tran.Complete();
                        panel1.Visible = false;
                        lblMessage.Visible = false;
                    }
                }
            }
            LoadAllRecords("");
        }
    }
}

Answer 1

You must set a class name for delete buttons for example class="delete"
Now add this jquery:

$('.delete').click(function(){
    $('td').css('background-color', 'white') //change back all tds to their original background.
    $(this).closest('tr').css('background-color', 'red');
    return confirm('are you sure to delete?');
 });

and adding this make better look for selected row:

tr.selected{border-collapse: collapse;}

Answer 2

使用onmousedown事件突出显示要删除的行，然后使用onclick事件进行实际删除。