zoukankan      html  css  js  c++  java

  • 在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;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;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/
  • 相关阅读:
    程序设计实习课(0)资源链接
    解决clion2016.3不能支持搜狗输入法的问题
    四元数运动学笔记（5）IMU驱动的运动误差方程
    四元数运动学笔记（4）旋转的雅克比矩阵
    四元数运动学笔记（3）四元数和旋转相关的约定表述
    四元数运动学笔记（2）旋转向量，旋转矩阵和四元数的关系
    单应矩阵，基本矩阵，本质矩阵
    ROS标定IDS相机
    四元数运动学笔记（1）旋转的表示
    IMU Noise Model
  • 原文地址：https://www.cnblogs.com/meta/p/1673237.html
Copyright © 2011-2022 走看看