<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> * { border: 0; padding: 0; font-family: Monaco, Arial; } body, td { font-size: 12px; } table.list { border: 0; border-spacing: 0; border-collapse: collapse; } table.list th { text-align: left; padding: 3px 10px 3px 10px; background-color: #f1f1f1; color: #777; text-shadow: #fff 1px 1px; border-bottom: #ccc 1px solid; background: -moz-linear-gradient(top, #fff, #f1f1f1); background: -webkit-linear-gradient(top #fff, #f1f1f1); background: -ms-linear-gradient(top, #fff, #f1f1f1); background: -o-linear-gradient(top, #fff, #f1f1f1); } table.list tr:nth-child(even) { background-color: #fafafa; } table.list td { border-top: #f1f1f1 1px solid; padding: 3px 10px 3px 10px; } .listcontainer { border-radius: 3px; border: 1px solid #ccc; } </style> <script type="text/javascript"> </script> </head> <body> <div class="listcontainer"> <table class="list" width="100%"> <thead> <tr> <th>Weekday</th> <th>Date</th> <th>Manager</th> <th>Qty</th> </tr> </thead> <tbody> <tr> <td>Mon</td> <td>09/11</td> <td>Jones</td> <td>639</td> </tr> <tr> <td>Tue</td> <td>09/12</td> <td>Megan Fox</td> <td>596</td> </tr> <tr> <td>Sun</td> <td>09/17</td> <td>Jennifer Aniston</td> <td>272</td> </tr> <tr> <td>Sun</td> <td>09/17</td> <td>ZYZ</td> <td>273</td> </tr> </tbody> </table> </div> </body> </html> <script type="text/javascript"> var lists = document.getElementsByClassName('list'); for (var listIndex = 0; listIndex < lists.length; listIndex++) { var trs = lists[listIndex].getElementsByTagName('tr'); for (var trIndex = 0; trIndex < trs.length; trIndex++) { trs[trIndex].onmouseover = function() { this.originalColor = this.style.backgroundColor; this.style.backgroundColor = '#f1f1f1'; } trs[trIndex].onmouseout = function() { this.style.backgroundColor = this.originalColor; } } } </script>
Posts
No comments:
Post a Comment