<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格过滤器</title> <script language="javascript" src="../MyfirstjQueryFileWord/jquery-1.10.2.js"> </script> <script language="javascript"> $(function(){ /* //第一种方法 $('.a').css('background','#f00'); $('.b').css('background','#f0f'); $('.c').css('background','#00f'); $('.d').css('background','#ff0'); $('.e').css('background','#f0f'); */ /* //第二种方法 $('table tr:first').css('background-color','#f00'); $('table tr:last').css('background-color','#f00'); $('table tr:odd').css('background-color','#f00'); */ $('table tr:even').css('background-color','#f00'); }); /* 当鼠标移到表格上是，当前一行背景变色 */ $(document).ready(function(){ $(".data_list tr td").mouseover(function(){ $(this).parent().find("td").css("background-color","#d5f4fe"); }); }) /* 当鼠标在表格上移动时，离开的那一行背景恢复 */ $(document).ready(function(){ $(".data_list tr td").mouseout(function(){ var bgc = $(this).parent().attr("bg"); $(this).parent().find("td").css("background-color",bgc); }); }) </script> </head> <body> <center> <table width="500" border="1" height="500"> <tr> <td class="a"> </td> </tr> <tr> <td class="b"> </td> </tr> <tr> <td class="c"> </td> </tr> <tr> <td class="d"> </td> </tr> <tr> <td class="e"> </td> </tr> </table> </center> </body> </html>