操作gridview，选中行时改变背景色且checkbox被选中，隔行变色，全选变色

来源：互联网发布：表情包大战知乎编辑：程序博客网时间：2024/06/12 01:48

css:

<style type="text/css">    .checked { background: #c0c0ff; }    .odd { background: #72FE95; }    .even { background: #B8E2EF; }    .current { background: #FFDD75; }  </style>

aspx页面

  <asp:GridView ID="gvShow" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#93BEE2"            BorderColor="#93BEE2"  Width="364px"             OnRowDataBound="gvShow_RowDataBound">            <Columns>              <asp:TemplateField>                <HeaderTemplate>                    <asp:CheckBox ID="CheckAll" runat="server" Text="全选" ToolTip="按一次全選，再按一次取消全選"/>                </HeaderTemplate>                <HeaderStyle  Width="50px"/>                <ItemTemplate>                    <asp:CheckBox runat="server" ID="ckbChose"/>                </ItemTemplate>                    <ItemStyle  Width="30px" CssClass="txt"/>                </asp:TemplateField>                <asp:TemplateField HeaderText="部门">                    <ItemTemplate>                        <asp:Label runat="server" ID="lblDep" Text='<%# Eval("PE_DEPA")%>'></asp:Label>                    </ItemTemplate>                    <ItemStyle Width="100px" CssClass="txt" />                </asp:TemplateField>                <asp:TemplateField HeaderText="人员工号">                    <ItemTemplate>                        <asp:Label runat="server" ID="lblCode" Text='<%# Eval("PE_ID") %>'></asp:Label>                    </ItemTemplate>                    <ItemStyle  Width="120px" CssClass="txt"/>                </asp:TemplateField>                <asp:TemplateField HeaderText="人员名称">                    <ItemTemplate>                        <asp:Label runat="server" ID="lblName" Text='<%# Eval("PE_NAME") %>' Width="100px"></asp:Label>                    </ItemTemplate>                    <ItemStyle  CssClass="txt"/>                </asp:TemplateField>            </Columns>             <EmptyDataTemplate>                            <table  align="center"  cellpadding="0" cellspacing="1" width="364px" >                                <tr style="background-color:#93BEE2">                                    <td style= "height:25px; width:30px;" ><b>选择</b></td>                                    <td style=" height:25px;"><b>部门</b></td>                                    <td style=" height:25px; width:120px;" ><b>人员工号</b></td>                                    <td style=" height:25px;" ><b>人员名称</b></td>                                </tr>                                <tr>                                    <td  colspan ="7" align ="center" style=" height:25px;" ><asp:Label runat="server" ID="lblEmptyData" ForeColor="red" Text="暂且没有记录信息！" ></asp:Label></td>                                </tr>                            </table>             </EmptyDataTemplate>            <HeaderStyle BackColor="#93BEE2"></HeaderStyle>        </asp:GridView>

js:

<script type="text/javascript">     var table = "<%=gvShow.ClientID %>";     var oldBg;     function SelectAll(ele) {         t = document.getElementById(table);         for (i = 1; i < t.rows.length; i++) {             t.rows[i].cells[0].children[0].checked = ele.checked;             if (t.rows[i].cells[0].children[0].checked) {                 t.rows[i].className = "checked";             }             else {                 t.rows[i].className = t.rows[i].getAttribute("oldClass");             }         }     }     function CheckTr(tr, evt) {         ele = evt.target || event.srcElement;         if (ele.tagName && ele.tagName != "INPUT")             tr.cells[0].children[0].checked = !tr.cells[0].children[0].checked;         if (tr.cells[0].children[0].checked) {             oldBg = tr.className = "checked";         }         else {             oldBg = tr.className = tr.getAttribute("oldClass");         }     }  </script>

后台:

 //鼠标移动事件加单击事件        protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e)        {            if (e.Row.RowType == DataControlRowType.Header)            {                CheckBox h = e.Row.FindControl("CheckAll") as CheckBox;                h.Attributes.Add("onclick", "SelectAll(this)");            }            else if (e.Row.RowType == DataControlRowType.DataRow)            {                e.Row.Attributes.Add("onclick", "CheckTr(this,event)");                //e.Row.Attributes.Add("class", e.Row.RowIndex % 2 == 0 ? "odd" : "even");                //e.Row.Attributes.Add("oldClass", e.Row.RowIndex % 2 == 0 ? "odd" : "even");                e.Row.Attributes.Add("onmouseover", "oldBg=this.className;this.className='current'");                e.Row.Attributes.Add("onmouseout", "this.className=oldBg;");                e.Row.Attributes["style"] = "Cursor:hand";            }        }