如题,我用tablesorter实现了表格最基本的排序+隔行变色功能但是在这基础上的一个"鼠标移动到该行,则该行高亮(也就是背景色设为白色)"的功能却失效了用的比较原始的方法,就是在tr标记上注册一个mouseover事件,触发css的设置为"over"
$(function(){
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over");
})
$(".tablesorter tr").mouseout(function(){
$(this).removeClass("over");
})
});
有没好心人指点一下,非常感谢.
$(function(){
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over");
})
$(".tablesorter tr").mouseout(function(){
$(this).removeClass("over");
})
});
有没好心人指点一下,非常感谢.
$(document).ready(function(){
$("#large").tablesorter({
widgets: ['zebra']
});
});
code]而这段则是实现"鼠标移动到该行,则该行高亮"功能的代码现在因为tablesorter的使用而失效了注:不启用tablesorter的隔行变色功能(也就是[code=JScript]widgets: ['zebra'] )的话,就没有该问题 $(function(){
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over");
})
$(".tablesorter tr").mouseout(function(){
$(this).removeClass("over");
})
});[/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style>
.over { background-color:#FFC;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript">
$(function(){
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over");
})
$(".tablesorter tr").mouseout(function(){
$(this).removeClass("over");
})
});
</script>
</head> <body>
<table width="600" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;" class="tablesorter">
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></body>
</html>
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
} }}
--></script>
</head><body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script language="javascript"><!--
//senfe("表名","奇行","偶行","鼠过色","点后色");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body></html></font>
$("#large").find("tr").hover(function(){ $(this).addClass("green");},
function() {
$(this).removeClass("green");
});
});
我的有用
Jquery $(document).ready(function() {
$(".stripe_tb tr").mouseover(function() {
$(this).addClass("over");
}).mouseout(function() {
$(this).removeClass("over");
})
$(".stripe_tb tr:even").addClass("alt");
});样式<style type="text/css">
.stripe_tb th {
background :#B5CBE6;
color:#003399;
line-height:20px;
height:30px;
}
.stripe_tb td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
.stripe_tb td * {
padding:0px 0px;
}
.stripe_tb tr.alt td {
background:#ecf6fc; /*这行将给所有偶数行加上背景色*/
}
.stripe_tb tr.over td {
background:#FEF3D1; /*这个将是鼠标高亮行的背景色*/
}
</style>
http://tablesorter.com/docs/example-pager.html
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over").siblings().removeClass("over");
}) 只要这一句就可以了
$(this).addClass("over").siblings().removeClass("over");
})
这一句真的很不错。