<!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>
表格奇偶行换色——简单表格与分组表格
最新推荐文章于 2023-10-13 11:16:05 发布
扫一扫
2750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
