突出显示Gridview LinkBut​​ton上的行单击确认警报ASP.Net

Question

我有删除按钮，确认提醒工作正常。但我想在显示警报之前为所选行的BackColor着色。它的工作正常并显示BackColor到Gray for View按钮，因为没有View按钮的警告。但它没有显示BackColor已更改为Delete按钮，因为它首先发出警报，而是，它会转到RowCommand事件。

如何更改backcolor之前警告删除消息？

<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>

- 代码背后

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

您必须为删除按钮设置类名称，例如class="delete"
现在添加这个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?');
 });

并添加此内容可以更好地查找所选行：

tr.selected{border-collapse: collapse;}

Answer 2

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