Home  >  Article  >  Web Front-end  >  js compatible standard table color effect_javascript skills

js compatible standard table color effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:03:22912browse

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
Statement:
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