JQuery1.4实现表格样式美化

主要是通过使用JQuery实现表格的简单隔行变色效果！

<mce:style type="text/css"><!-- tr{ height: 30px; font-size: 14px; } TH{ background: olive; } .dan{ background: #ddffff; } .shuang{ background: #DEEFDD; } .over{ background: white; } --></mce:style><style type="text/css" mce_bogus="1">tr{ height: 30px; font-size: 14px; } TH{ background: olive; } .dan{ background: #ddffff; } .shuang{ background: #DEEFDD; } .over{ background: white; }</style>

<mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> //首先是引入JQuery的文件。src的目录根据自己的JQuery文件存放的位置改变一下，还有文件名。（别到最后改了个路径然后下个1.3的版本，来问我怎么用1.4.2说找不到。） <mce:script type="text/javascript"><!-- $(document).ready(function(){ $('#jquery tr').addClass('dan'); //jquery 是我设置的一个表格ID，因为一个页面里面可能有很多表格，我只需要一个表格实现单双行变色而已。 （假如是页面里面所有表格都实现单双行变色，可以这样访问：$("tr").addClass("className")） $('#jquery tr:even').addClass('shuang'); //奇偶变色，添加样式 $("#jquery tr").hover( function(){ //执行这个函数，表明鼠标移动到当前行的时候，需要实现哪些操作。 $(this).addClass("over"); //给当前行增加变色。 }, function(){ //执行这个函数，表明鼠标移出当前行的时候，需要实现哪些操作。 $(this).removeClass("over"); //把样式还原到原来的颜色 } ); }); // --></mce:script> <table id="jquery" align="center" width="800" cellpadding="0" cellspacing="0" border="0"> <col align="center"> <col align="center"> <col align="center"> <col align="center"> <TR> <TH>Name</TH> <TH>DeptMent</TH> <TH>Phone</TH><TH>Mobile</TH> </TR> <tr> <td>123</td><td>123</td><td>123</td> <td>123123</td></tr> *******************************