本文實例講述了jquery自定義表格樣式實現代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
上面這張圖有3種狀態，默認狀態（灰白相間），鼠標懸浮狀態（綠色），鼠標點擊狀態（黃色），是如何實現的吶？
Html代碼如下：
<table> <thead> <tr> <td>編號</td> <td>姓名</td> <td>年齡</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1111</td> <td>1111</td> <td>1111</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>2222</td> <td>2222</td> <td>2222</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>3333</td> <td>3333</td> <td>3333</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>4444</td> <td>4444</td> <td>4444</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>5555</td> <td>5555</td> <td>5555</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> </tbody></table>
插件實現代碼如下：
(function () { $.fn.TabStyle = function (options) { //默認參數設置 var settings = { evenClass: "tab_even", //偶數行樣式 oddClass: "tab_odd", //奇數行樣式 hoverClass: "tab_hover", //鼠標懸浮樣式 clickClass: "tab_click", //鼠標點擊樣式 isClick: true //是否開啟鼠標點擊樣式 }; //合并參數 $.extend(settings, options); return this.each(function () { //為奇偶行分別添加樣式 $(" > tbody > tr:even", this).addClass(settings.evenClass); $(" > tbody > tr:odd", this).addClass(settings.oddClass); $(" > tbody > tr", this).each(function (i) { //鼠標懸浮樣式 $(this).hover(function () { $(this).addClass(settings.hoverClass); }, function () { $(this).removeClass(settings.hoverClass); }); //鼠標點擊樣式 if (settings.isClick) { $(this).bind("click", function () { $(this).addClass(settings.clickClass).siblings("tr").removeClass(settings.clickClass); }); } }); }); }})();有些時候我們可能并不需要鼠標點擊后的樣式，因此設置了isClick這個作為控制開關。如果不想要點擊樣式，將其設置為false即可。
DEMO如下：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>表格樣式（銀光棒）</title> <style type="text/css"> table{ width:700px; border:1px solid green;border-collapse:collapse;} table td{height:40px; text-align:center; width:25%;} .tab_even{ background-color: #DDD;} .tab_odd{ background-color: White;} .tab_hover{ background-color: Green;color:White;} .tab_click{ background-color: Orange;} </style></head><body> <table> <thead> <tr> <td>編號</td> <td>姓名</td> <td>年齡</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1111</td> <td>1111</td> <td>1111</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>2222</td> <td>2222</td> <td>2222</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>3333</td> <td>3333</td> <td>3333</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>4444</td> <td>4444</td> <td>4444</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> <tr> <td>5555</td> <td>5555</td> <td>5555</td> <td><input type="button" value="查看" /><input type="button" value="刪除" /></td> </tr> </tbody> </table> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script> <script type="text/javascript"> $("table").TabStyle(); </script></body></html>通過上文詳細的代碼，大家應該會利用jquery自定義表格樣式了，小編的表格樣式還不夠完美，還需要進行改進，希望大家在完成這個樣式的基礎上，繼續創新，做一個屬于自己的表格。
新聞熱點
疑難解答
