table样式
一直以來，css和JS都是軟肋，因為需要不得不重新溫故。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">table.hovertable{ font-family: verdana,arial,sans-serif;font-size:11px; color:#333333;border: 1px solid #C3DDE0;border-collapse: collapse;}table.hovertable th{ background-color:#F0F0F0;border-width: 1px;padding: 8px;border-width: 1px;border-style: solid;border-color: #C3DDE0;}table.hovertable tr{ background-color:#FFFFFF;border-width: 1px;border-style: solid;border-color: #C3DDE0;}table.hovertable.hover,table.hovertable tr.altrow{background-color:#d4e3e5 ;}table.hovertable td{ border-width: 1px;padding: 8px; border-style: solid; border-color: #C3DDE0;}</style><script type="text/javascript" >window.onload = function () {var rows = document.getElementsByTagName("tr");for (var i=1; i<=rows.length;i++){rows[i].onmouseover=function(){this.className +='altrow';//鼠標經過時，顯示樣式altrow }rows[i].onmouseout = function(){this.className = this.className.replace('altrow','');//鼠標走的時候，顯示樣式清空 }}}</script> </head> <body> <table class="hovertable"><tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr><tr><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr><tr><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr><tr><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr><tr><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr> </table> </body> </html>?
總結
- 上一篇： [密码学基础][每个信息安全博士生应该知
- 下一篇： [Letcode]第[34]题[JAVA