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> *******************************