asp.net ListView交替背景颜色实现代码
<tr style="<%# (Container.DisplayIndex%2==0)?"background-color:white;":"background-color:#EEEEEE;" %>">
另外还有直接用js处理整个页面中所有tr的交替色：
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选并改变TR颜色</title>
<script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"><!--
tr_bgcolor(this);
// --></script>
<script language="JavaScript" type="text/javascript"><!--
function tr_bgcolor(c){
var tr = c.parentNode.parentNode;
tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';
}
function selall(obj){
for (var i=0; i<obj.form.elements.length; i++)
if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){
obj.form.elements[i].checked = obj.checked;
tr_bgcolor(obj.form.elements[i]);
}
}
// --></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">
<tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr>
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr style="background-color:#eee;" style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee" style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee" style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee" style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee" style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格行tr颜色交替</title>
<style><!--
#ab{border-collapse:collapse;width:800px;margin:10px auto;}
#ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}
.tr1{background-color:#eee;color:red;}
.tr2 {background-color:#ccc;color:blue;}
--></style><style bogus="1">#ab{border-collapse:collapse;width:800px;margin:10px auto;}
#ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}
.tr1{background-color:#eee;color:red;}
.tr2 {background-color:#ccc;color:blue;}</style>
<script type="text/javascript"><!--
function colortd(ob) {
obob=ob.rows;
for(var i=0;i<ob.length;i++) {
if(i%2) ob(i).className="tr1";
else ob(i).className="tr2";
}
}
// --></script>
</head>
<body onload="colortd(ab)">
<table id="ab">
<tr><td>hang------------1</td></tr>
<tr><td>hang------------2</td></tr>
<tr><td>hang------------3</td></tr>
<tr><td>hang------------4</td></tr>
</table>
</body>
</html>
相关推荐
-
ASP.NET中ListView(列表视图)的使用前台绑定附源码
1.A,运行效果图 1.B,源代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropLvw.aspx.cs" Inherits="DropLvw" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
-
asp.net gridview中用checkbox全选的几种实现的区别
1.ext的grid Ext.grid.CheckboxColumn = function(config){ config.id = config.id || 'ck'; config.columnId = config.id || 'ck'; return Ext.applyIf(config||{},{ init:function(grid){ grid.on('cellclick', this.onCellClick, this); grid.on('headerclick',this.o
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
复制代码 代码如下: using System; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebC
-
asp.net Repeater取得CheckBox选中的某行某个值的c#写法
1. foreach (Control c in this.rptTables.Controls) { CheckBox cbx = (CheckBox)c.FindControl("cbxId"); TextBox tbx = (TextBox)c.FindControl("tbxTableName"); if (cbx != null) { if (cbx.Checked == true) {
-
ASP.NET笔记之 ListView 与 DropDownList的使用
1.Repeater用来显示数据.ListView用来操作数据 InsertItemTemplate和updateItemTemplate**Eval(显示数据)和Bind(双向绑定:不仅是需要展现,更需要把数据绑定到数据库中) ItemPlaceholderID:占位符,决定占位,把头部(之上)和尾部(之下)分隔开ItemTemplate:展示功能 自动生成的ListView需要调整的地方(1.生成的样式要提到style中,不要用内联的方式(2.ItemTemplate里面一半没必要用<asp
-
asp.net ListView 数据绑定
代码如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); string strsql = @"server=.;uid=sa;pwd=sa;database=Northwind"; SqlConnection my_Conn = new SqlConnection(strsql); my_Conn.Open(); string str_sql ="select * fro
-
在asp.net中实现datagrid checkbox 全选的方法
复制代码 代码如下: <form runat="server"> <asp:DataGrid AutoGenerateColumns="false" OnItemCreated="itemcreate" DataKeyField="link_id" ID="mydg" runat="server" > <columns> <asp:Tem
-
WPF的ListView控件自定义布局用法实例
本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http
-
WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中"全选"时,列表中所有的项目都会被选中:反之,取消选中"全选"时,所有项都会被取消勾选. 在列表中选中部分数据项目时,"全选"框会呈现不确定状态(Indetermine). 由此看出,"全选"复选框与列表项中的复选框达到了双向控制的效果. 其设计思路:首先,创建自定义
-
asp.net 获取Datalist中Checkbox的值的小结
前台的示例代码如下,用的是datalist控件,要显示的是Student表中的StudentID和姓名 复制代码 代码如下: <asp:DataList ID="dlTable" runat="server" > <ItemTemplate> <td align="center"> <asp:Label ID="lblID" runat="server" Text=