本人刚学jquery,以前一直用mootools。现要对一个id为t1的table中的所有tr添加mouseenter和mouseout事件,我是这样弄的,但是有错误:
function HighLightTR(color,objId)
{
var trBgcolor;
var ArrTR = $(objId+" tr");
ArrTR.each(function(index,element){
element.mouseout(function(){
element.css('background-color','red');
});
element.mouseenter(function(){
element.css('background-color','blue');
});
}); return ArrTR;}
function HighLightTR(color,objId)
{
var trBgcolor;
var ArrTR = $(objId+" tr");
ArrTR.each(function(index,element){
element.mouseout(function(){
element.css('background-color','red');
});
element.mouseenter(function(){
element.css('background-color','blue');
});
}); return ArrTR;}
{ var trBgcolor; var ArrTR = $(objId+" tr");
ArrTR.each(function(index,element){$(element).mouseout(function(){$(this).css('background-color','red');
});
$(element).mouseenter(function(){
$(this).css('background-color','blue');
});
}); return ArrTR;}
试试
http://download.csdn.net/detail/p2227/3936926另外你只给出函数是不全面的,相关的HTML也要有最后,jQuery中根据ID获取DOM是$("#id")
$(function(){
$("#t1 tr").hover(function(){
$(this).css('background-color','red');
},function(){
$(this).css('background-color','blue');
})
});
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.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
//作 者: yenange
//功能说明: 设置奇偶行换色
//输入参数: 表格(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
//作 者: yenange
//功能说明: 设置带分组的表格的奇偶行换色
//输入参数: 表格(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>
$(this).bind("mouseout mousedown",function(){
code
});
})
function jQueryHighLightTR(color,objId)
{ var trBgcolor; var ArrTR = $(objId+" tr");
ArrTR.mouseenter(function(){ trBgcolor = this.style.backgroundColor;
$(this).css('background-color',color);
$(this).css('cursor',"hand");
});
ArrTR.mouseout(function(){
$(this).css('background-color',trBgcolor);
});
return ArrTR;}