在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 2010-02-25 10:38  公众号73只蚂蚁  阅读(640)  评论(0)  编辑  收藏  举报

导航