练习案例_鼠标经过表格行变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>鼠标经过表格行变色</title> <style type="text/css"> td{ border-bottom: 1px solid lightgray; width: 100px; height: 25px; } .firstTd{ width: 30px; } </style> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ //选中table下面的除了第一行外所有的行 $("#mailTable tr:not(:eq(0))").mouseenter(function(){ this.style.backgroundColor="lightgray"; }).mouseout(function () { this.style.backgroundColor=""; }); }); </script> </head> <body> <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px"> <tr><td class="firstTd"></td><td>收件人</td><td>主题</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> </table> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <style type="text/css"> td{ border-bottom: 1px solid lightgray; width: 100px; height: 25px; } .firstTd{ width: 30px; } </style> <script type="text/javascript"> window.onload=function(){ var table = document.getElementById("mailTable"); var trs = table.getElementsByTagName("tr"); for(var i=1;i<trs.length;i++){ var tr = trs.item(i); //鼠标进入事件 tr.onmouseover=function(){ this.style.backgroundColor="lightgray"; } // tr.onmouseout=function(){ this.style.backgroundColor=null; } } } </script> </head> <body> <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px"> <tr><td class="firstTd"></td><td>收件人</td><td>主题</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> </table> </body> </html>