在asp.net中ListView的交替背景颜色实现

在asp.net中ListView的交替背景颜色实现

GridView的处理得较多，ListView可以这样实现，

只一行代码：

<tr style="<%# (Container.DisplayIndex%2==0)?"background-color:white;":"background-color:#EEEEEE;" %>">

另外还有直接用js处理整个页面中所有tr的交替色：


view plaincopy to clipboardprint?
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <title>网页特效|Linkweb.cn/Js|---全选并改变TR颜色</title>  
  5. <mce:script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"><!--  
  6. tr_bgcolor(this);  
  7. // --></mce:script>  
  8. <mce:script language="JavaScript" type="text/javascript"><!--  
  9. function tr_bgcolor(c){  
  10.     var tr = c.parentNode.parentNode;  
  11.     tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';  
  12. }  
  13. function selall(obj){  
  14.     for (var i=0; i<obj.form.elements.length; i++)  
  15.     if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){  
  16.         obj.form.elements[i].checked = obj.checked;  
  17.         tr_bgcolor(obj.form.elements[i]);  
  18.     }  
  19. }  
  20. // --></mce:script>  
  21. </head>  
  22. <body>  
  23. <form id="form1" name="form1" method="post" action="">  
  24. <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">  
  25. <tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr>  
  26. <tr><td>  
  27.     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">  
  28.     <tr style="background-color:#eee;" mce_style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">***********************</td></tr>  
  29.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  30.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  31.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  32.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  33.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  34.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  35.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  36.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  37.     </table>  
  38. </td></tr>  
  39. </table>  
  40. </form>  
  41. </body>  
  42. </html>  
 

 

或

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>表格行tr颜色交替</title>  
  6. <mce:style><!--  
  7. #ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  8. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  9. .tr1{background-color:#eee;color:red;}  
  10. .tr2 {background-color:#ccc;color:blue;}  
  11. --></mce:style><style mce_bogus="1">#ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  12. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  13. .tr1{background-color:#eee;color:red;}  
  14. .tr2 {background-color:#ccc;color:blue;}</style>  
  15. <mce:script type="text/javascript"><!--  
  16. function colortd(ob) {  
  17. obob=ob.rows;  
  18. for(var i=0;i<ob.length;i++) {  
  19.     if(i%2) ob(i).className="tr1";  
  20.     else ob(i).className="tr2";  
  21.     }  
  22. }  
  23. // --></mce:script>  
  24. </head>  
  25. <body onload="colortd(ab)">  
  26. <table id="ab">  
  27. <tr><td>hang------------1</td></tr>  
  28. <tr><td>hang------------2</td></tr>  
  29. <tr><td>hang------------3</td></tr>  
  30. <tr><td>hang------------4</td></tr>  
  31. </table>  
  32. </body>  
  33. </html>  
 

 

http://four-corner.appspot.com/

posted on   公众号73只蚂蚁  阅读(641)  评论(0)  编辑  收藏  举报

编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述

导航

< 2010年2月 >
日 一 二 三 四 五 六
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 1 2 3 4 5 6
7 8 9 10 11 12 13
点击右上角即可分享
微信分享提示
AI IDE Trae