jquery自定义表格样式

本文实例讲述了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自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。