这篇文章主要介绍了jquery如何自定义表格样式，分别实现三种样式：默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），感兴趣的小伙伴们可以参考一下
本文实例讲述了jquery自定义表格样式实现代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
上面这张图有3种状态，默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），是如何实现的呐？
Html代码如下：
| 编号 | 姓名 | 年龄 | 操作 |
| 1111 | 1111 | 1111 | |
| 2222 | 2222 | 2222 | |
| 3333 | 3333 | 3333 | |
| 4444 | 4444 | 4444 | |
| 5555 | 5555 | 5555 |
插件实现代码如下：
(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如下：
表格样式（银光棒）
| 编号 | 姓名 | 年龄 | 操作 |
| 1111 | 1111 | 1111 | |
| 2222 | 2222 | 2222 | |
| 3333 | 3333 | 3333 | |
| 4444 | 4444 | 4444 | |
| 5555 | 5555 | 5555 |
通过上文详细的代码，大家应该会利用jquery自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。
以上就是jquery自定义表格样式的详细内容，更多请关注0133技术站其它相关文章！
