js表格各行换色
为了方便大家观看效果,首先手动写一个GridView然后绑定数据。
前台代码:
<body >
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvBaidu" runat="server" AutoGenerateColumns="False" Font-Size="12px"
Width="409px" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="ID" HeaderText="编号" />
<asp:BoundField DataField="Name" HeaderText="姓名" />
<asp:BoundField DataField="Sex" HeaderText="性别" />
<asp:BoundField DataField="Age" HeaderText="年龄" />
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</div>
</form>
</body>
后台cs代码:
public DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataBindGridView(gvBaidu);
}
}
private void DataBindGridView(GridView Gv)
{
dt.Columns.Add("ID", typeof(string));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Sex", typeof(string));
dt.Columns.Add("Age", typeof(string));
DataRow dr = dt.NewRow();
dr["ID"] = "1";
dr["Name"] = "大傻";
dr["Age"] = "18";
dr["Sex"] = "男";
dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow();
dr1["ID"] = "2";
dr1["Name"] = "花花";
dr1["Age"]