Table表格的隔行变色，高亮选择当前行效果-白红宇的个人博客

发布日期：2021-05-14 04:36:49 浏览次数：18 分类：博客文章
本文共 11119 字，大约阅读时间需要 37 分钟。
��
View Code
<%
    @ Page Language
    =
    "
    C#
    "
     AutoEventWireup
    =
    "
    true
    "
      CodeFile
    =
    "
    Default.aspx.cs
    "
     Inherits
    =
    "
    _Default
    "
     
    %>
    
    
     
    
    <
    html 
    xmlns
    ="http://www.w3.org/1999/xhtml"
    >
    
    <
    head 
    runat
    ="server"
    >
        
    <
    title
    >
    JQuer������������������������������������
    
     
        
    <
    style 
    type
    ="text/css"
    >
        #header     
    {
            background-color
    :
    #00ffff
    ;
            text-align
    :
    center
    ;
        
    }
        .style1     
    {
            text-align
    :
     right
    ;
        
    }
        .style2     
    {
            text-align
    :
     center
    ;
        
    }
        
    
     
        
    <
    link 
    href
    ="tables.css"
     rel
    ="stylesheet"
     type
    ="text/css"
     
    />
        
    <
    script 
    src
    ="JS/jquery-1.4.2.min.js"
     type
    ="text/javascript"
    >
     
        
    <
    script 
    type
    ="text/javascript"
    >
            $(document).ready(
    function
    () {         doChangeColorOfRow(
    "
    #tableThis tr:even:not(#header)
    "
    , 
    "
    #tableThis tr:odd:not(#header)
    "
    );         });                
    function
     doChangeColorOfRow(evenTR, oddTR) {         $(evenTR).each(
    function
    () {             $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #F0F8FF
    "
    ).bind(
    "
    mouseover
    "
    , 
    function
    () {                 
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    !=
     
    "
    #ffff00
    "
    ) {                     $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #D8FAD8
    "
    );                 }             }).bind(
    "
    mouseout
    "
    , 
    function
    () {                 
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    !=
     
    "
    #ffff00
    "
    ) {                     $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #F0F8FF
    "
    );                 }             }).bind(
    "
    click
    "
    , 
    function
    () {                 $(evenTR).each(
    function
    () {                     
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    ==
     
    "
    #ffff00
    "
    ) {                         $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #F0F8FF
    "
    );                     }                 });                 $(oddTR).each(
    function
    () {                     
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    ==
     
    "
    #ffff00
    "
    ) {                         $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffffff
    "
    );                     }                 });                 $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffff00
    "
    );             });         });         $(oddTR).each(
    function
    () {             $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffffff
    "
    ).bind(
    "
    mouseover
    "
    , 
    function
    () {                 
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    !=
     
    "
    #ffff00
    "
    ) {                     $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #D8FAD8
    "
    );                 }             }).bind(
    "
    mouseout
    "
    , 
    function
    () {                 
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    !=
     
    "
    #ffff00
    "
    ) {                     $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffffff
    "
    );                 }             }).bind(
    "
    click
    "
    , 
    function
    () {                 $(evenTR).each(
    function
    () {                     
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    ==
     
    "
    #ffff00
    "
    ) {                         $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #F0F8FF
    "
    );                     }                 });                 $(oddTR).each(
    function
    () {                     
    if
     ($(
    this
    ).css(
    "
    background-color
    "
    ) 
    ==
     
    "
    #ffff00
    "
    ) {                         $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffffff
    "
    );                     }                 });                 $(
    this
    ).css(
    "
    background-color
    "
    , 
    "
    #ffff00
    "
    );             });         });     }         
    
     
    
    
     
    
    <
    body
    >
        
    <
    form 
    id
    ="form1"
     runat
    ="server"
    >
        
    <
    table 
    style
    ="width: 100%;"
     cellpadding
    ="0"
     cellspacing
    ="0"
     id
    ="tableThis"
    >
            
    <
    tr 
    id
    ="header"
    >
                
    <
    td
    >
    ���������
    
     
                
    <
    td
    >
                    
     
                    ���������
    
     
                
    <
    td
    >
                    
     
                    ���������
    
     
                
    <
    td
    >
                    
     
                    ���������
    
     
                    
    <
    td
    >
    ������������������
    
     
                    
    <
    td
    >
    ���������������������������
    
     
            
    
     
            
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    123423432.12
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    32445345.13
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    345564.25
    
     
                                
    <
    td 
    class
    ="style1"
    >
    567657567.78
    
     
                    
    <
    td 
    class
    ="style1"
    >
    3454353453.90
    
     
            
    
     
            
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    34435345.34
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    456546
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    675675
    
     
                                
    <
    td 
    class
    ="style1"
    >
    678879789
    
     
                    
    <
    td 
    class
    ="style1"
    >
    34534534.0
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    23424
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    6546
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    67868
    
     
                                
    <
    td 
    class
    ="style1"
    >
    980890
    
     
                    
    <
    td 
    class
    ="style1"
    >
    45345
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    234234
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    123123
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    324234
    
     
                                
    <
    td 
    class
    ="style1"
    >
    342423
    
     
                    
    <
    td 
    class
    ="style1"
    >
    345345
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    345345
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    546546
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    567567
    
     
                                
    <
    td 
    class
    ="style1"
    >
    67867867
    
     
                    
    <
    td 
    class
    ="style1"
    >
    67867
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    345354
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    345345
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    5654
    
     
                                
    <
    td 
    class
    ="style1"
    >
    567658678
    
     
                    
    <
    td 
    class
    ="style1"
    >
    879879789
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    34535
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    4534
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    756765
    
     
                                
    <
    td 
    class
    ="style1"
    >
    867867
    
     
                    
    <
    td 
    class
    ="style1"
    >
    897987987
    
     
            
    
     
             
    <
    tr
    >
            
    <
    td 
    class
    ="style2"
    >
    ������
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    456434534
    
     
                
    <
    td 
    class
    ="style1"
    >
                    546456
     
                
    
     
                
    <
    td 
    class
    ="style1"
    >
                    
     
                    5675756
    
     
                                
    <
    td 
    class
    ="style1"
    >
    67867867
    
     
                    
    <
    td 
    class
    ="style1"
    >
    8797987
上一篇：GridView的另外一种分页方式，可提高加载速度
下一篇：C#委托的异步调用[转]
发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
发表评论

最新留言

关于作者

推荐文章
