Home > Web Front-end > JS Tutorial > body text

js compatible standard table color effect_javascript skills

WBOY
Release: 2016-05-16 19:03:22
Original
911 people have browsed it

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



* { margin:0; padding:0; font-size:14px }
body { text-align:center;} #btn { list-style:none inside; width:210px; margin:10px auto; clear:both; }
#btn li { float:left; width:100px; line-height:20px } #btn li a{ display:block; text-decoration:none; color:#333333}
#gray { background:#f5f5f5; cursor: pointer }
    #green { background:#D7ECDE; cursor:pointer }
    table { border-collapse:collapse; width:70%; margin:10px auto }
  • td { line-height:100%; height:24px; line-height:24px; padding:0 4px } td a { text-decoration:none; color:#333; display:block; } #tab_gray td { border:1px solid #B9B9B9; background: #F2F2F2; }
  • #tab_green td { border:1px solid #95CCA7; background:#EBF5EE; }
    #tab_gray td:hover, #tab_green td:hover { background:#fff; }



    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
Table Table Table
hello hello hello
hello hello hello
    

gray
    
<script> <BR>function green(){ <BR>document.getElementById("tab_gray").id="tab_green"; <BR>} <BR>function gray(){ <BR>document.getElementById("tab_green").id="tab_gray"; <BR>} <BR></script>green                                                                                                               
TableTableTable
hellohellohello
hellohellohello
Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template