<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .odd{ background-color:Yellow; } .even{ background-color:Gray; } .tdGroup { background-color:Green; } .mouseOver{ background-color:Red; } </style> <script src="jquery/jquery-1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.fn.ChangeOddEvenTrColor("tbodyList", "odd", "even", true, "pointer", "mouseOver"); $.fn.ChangeOddEvenTrColorWithGroup("tableList", "odd", "even", "tdGroup", false, true, "pointer", "mouseOver"); $.fn.ChangeOddEvenTrColorWithGroup("tableList2", "odd", "even", "tdGroup", false, false, "pointer", "mouseOver"); }); //===================================================================== //插件名称: ChangeOddEvenTrColor //作 者: //功能说明: 设置奇偶行换色 //输入参数: 表格(table或tbody)id, 奇行class, 偶行class, 是否从第一行开始 //调用示例: $(function(){ $.fn.ChangeOddEvenTrColor("table1", "odd", "even", true,"pointer","mouseOver"); }); //输出参数: //创建日期: 2011-09-01 (function ($) { jQuery.fn.ChangeOddEvenTrColor = function (tabId, oddClass, evenClass, fromFirstTr,cursor,mouseOverClass) { var $obj = fromFirstTr ? $("#" + tabId + " tr") : $("#" + tabId + " tr").not(":first"); $obj.filter(":odd").addClass(oddClass).css("cursor",cursor); $obj.filter(":even").addClass(evenClass).css("cursor",cursor); if (typeof (mouseOverClass) != "undefined") { $($obj).each(function () { $(this).mouseover(function () { $(this).addClass(mouseOverClass); }).mouseout(function () { $(this).removeClass(mouseOverClass); }); }); } } })(jQuery); //===================================================================== //插件名称: ChangeOddEvenTrColorWithGroup //作 者: //功能说明: 设置带分组的表格的奇偶行换色 //输入参数: 表格(table或tbody)id, 奇行class, 偶行class,合并单元格的class,是否从第一行开始， 分组是第一列， 指针名称， 鼠标移上样式(可选) //调用示例: $(function(){ $.fn.ChangeOddEvenTrColorWithGroup("tableList", "odd", "even", "tdGroup", false, true, "pointer", "mouseOver"); }); //输出参数: //创建日期: 2011-09-29 (function ($) { jQuery.fn.ChangeOddEvenTrColorWithGroup = function (tabId, oddClass,evenClass,groupClass,fromFirstTr,GroupIsFirstCol,cursor,mouseOverClass) { var $obj = fromFirstTr ? $("#" + tabId + " tr") : $("#" + tabId + " tr").not(":first"); var groupCol=GroupIsFirstCol?"first":"last"; var colNum = $obj.filter(":first").find("td").length; $obj.each(function (i) { if ($(this).find("td").length == colNum) { $(this).find("td").filter(":" + groupCol).addClass(groupClass) .siblings().addClass(i % 2 == 0 ? evenClass : oddClass).css("cursor",cursor); } else { $(this).find("td").addClass(i % 2 == 0 ? evenClass : oddClass).css("cursor",cursor); } }) if(typeof(mouseOverClass)!="undefined"){ $obj.mouseover(function (i) { if ($(this).find("td").length == colNum) { $(this).find("td").filter(":"+groupCol).siblings().addClass(mouseOverClass); } else { $(this).find("td").addClass(mouseOverClass); } }).mouseout(function (i) { if ($(this).find("td").length == colNum) { $(this).find("td").filter(":"+groupCol).siblings().removeClass(mouseOverClass); } else { $(this).find("td").removeClass(mouseOverClass); } }); } } })(jQuery); </script> </head> <body> <table id="table1" cellpadding="2" cellspacing="1" border="1" style="width: 100%;"> <tr> <th>Class</th><th>Name</th><th>Age</th> </tr> <tbody id="tbodyList"> <tr> <td> A</td> <td> 叶子</td> <td> 1</td> </tr> <tr> <td> B</td> <td> 李子</td> <td> 2</td> </tr> <tr> <td> C</td> <td> 王子</td> <td> 3</td> </tr> <tr> <td> D</td> <td> 刘欢</td> <td> 4</td> </tr> </tbody> </table> <br /> <table id="tableList" cellpadding="2" cellspacing="1" border="1" style="width: 100%;"> <tr> <th>Class</th><th>Name</th><th>Age</th> </tr> <tr> <td rowspan="2"> A</td> <td> 叶子</td> <td> 1</td> </tr> <tr> <td> 李子</td> <td> 2</td> </tr> <tr> <td rowspan="3"> B</td> <td> 王子</td> <td> 3</td> </tr> <tr> <td> 刘欢</td> <td> 4</td> </tr> <tr> <td> 马云</td> <td> 5</td> </tr> <tr> <td> C</td> <td> 吴天</td> <td> 6</td> </tr> <tr> <td> D</td> <td> ？？</td> <td> 7</td> </tr> <tr> <td rowspan="2"> E</td> <td> 吕梁</td> <td> 8</td> </tr> <tr> <td> 淡雅</td> <td> 9</td> </tr> </table> <br /> <table id="tableList2" cellpadding="2" cellspacing="1" border="1" style="width: 100%;"> <tr> <th>Name</th><th>Age</th> <th>Class</th> </tr> <tr> <td> 叶子</td> <td> 1</td> <td rowspan="2"> A</td> </tr> <tr> <td> 李子</td> <td> 2</td> </tr> <tr> <td> 王子</td> <td> 3</td> <td rowspan="3"> B</td> </tr> <tr> <td> 刘欢</td> <td> 4</td> </tr> <tr> <td> 马云</td> <td> 5</td> </tr> <tr> <td> 吴天</td> <td> 6</td> <td> C</td> </tr> <tr> <td> ？？</td> <td> 7</td> <td> D</td> </tr> <tr> <td> 吕梁</td> <td> 8</td> <td rowspan="2"> E</td> </tr> <tr> <td> 淡雅</td> <td> 9</td> </tr> </table> </body> </html>
表格奇偶行换色——简单表格与分组表格
最新推荐文章于 2021-10-15 18:58:28 发布
2403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
