jquery自定义表格样式

本文实例讲述了jquery自定义表格样式实现代码。分享给大家供大家参考。具体如下：运行效果截图如下：

上面这张图有3种状态，默认状态（灰白相间),鼠标悬浮状态（绿色),鼠标点击状态（黄色),是如何实现的呐？超文本标记语言代码如下：

表格和tr td编号运输署/运输署姓名运输署/运输署年龄运输署/运输署操作/TD/tr/ad t正文tr TD 1111/TD TD TD 1111/TD TD TD TD 1111/TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 2222/TD TD TD 2222/TD TD TD 2222/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 3333/TD TD TD 3333/TD TD TD 3333/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 4444/TD TD TD 4444/TD TD TD 4444/TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 5555/TD TD TD 5555/TD TD TD 5555/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//td /tr /tbody/table插件实现代码如下：

(function(){ $。fn。tabstyle=函数(选项){//默认参数设置定义变量设置={ evenClass: 'tab_even '，//偶数行样式oddClass: 'tab_odd '，//奇数行样式悬停类： 'tab_hover '，//鼠标悬浮样式单击类别： '选项卡_单击',//鼠标点击样式isClick: true //是否开启鼠标点击样式};//合并参数$.扩展（设置，选项);返回this.each(function () { //为奇偶行分别添加样式$(' tbody tr:even '，这个)。添加CLaSS(设置。even CLaSS)；$(' tbody tr:odd '，这个)。addCLaSS(设置。odd class)；$(' tbody tr '，这个)。每个（函数{//鼠标悬浮样式$(这个)。悬停(function () { $(this)).添加CLaSS(设置。HeaLTH CLaSS)；}，function () { $(this).移除CLaSS(设置。HeaLTH CLaSS)；});//鼠标点击样式if (settings.isClick) { $(this).bind('click ')，function () { $(this).添加类（设置。单击类)。兄弟姐妹(' tr ').移除类（设置。单击类);});} });});}})();有些时候我们可能并不需要鼠标点击后的样式，因此设置了isClick这个作为控制开关。如果不想要点击样式，将其设置为错误的即可演示。如下：

html xmlns=' http://www。w3。org/1999/XHTML '标题表格样式（银光棒)/title style type=' text/CSS '表格{ width :700 pxborder:1px纯绿色；边框塌陷：}表格td { height:40px文本对齐：居中；宽度：25%;} .tab _ even {底色： # DDD；} .tab _奇数{背景-颜色：白色；} .tab _悬停{背景-颜色：绿色；颜色：白色；} .tab _ click {底色：橙色；}/style/床头桌和tr td编号运输署/运输署姓名运输署/运输署年龄运输署/运输署操作/TD/tr/ad t正文tr TD 1111/TD TD TD 1111/TD TD TD TD 1111/TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 2222/TD TD TD 2222/TD TD TD 2222/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 3333/TD TD TD 3333/TD TD TD 3333/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 4444/TD TD TD 4444/TD TD TD 4444/TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/tr TD 5555/TD TD TD 5555/TD TD TD 5555/TD TD TD TD TD输入类型='按钮'值='查看/input type='button' value='删除//TD/tr/t正文/表脚本src=' http :/Scripts/jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/script script src=' http :/Scripts/jquery。很简单。tabstyle。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' table ').TabStyle()；/脚本/正文/html通过上文详细的代码，大家应该会利用jquery自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。