参考代码:
一、隔行换色
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定:
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N个子或奇偶元素
二、鼠标经过变色
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})
或者
$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})
其他参考资料:
<script type="text/javascript"> $(document).ready(function () { $("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。 $(this).removeClass("over"); $(this).addClass("click"); }) $("#right tr td").mouseup(function () {//鼠标弹起时,清除td的样式 $(this).removeClass("click"); }) $("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over $(this).addClass("over"); }) $("#right tr").mouseout(function () { //鼠标离开tr,清除样式.over $(this).removeClass("over"); }) $("#right tr").click(function () { //click tr时,添加样式.click $(this).addClass("click"); $(this).siblings().removeClass("click"); }) }); </script>
项目中使用方式:
样式:
<style type="text/css">
.even_tr{ background-color: #FFFFFF;}
.odd_tr{ background-color: #d5effc;}
</style>
1、鼠标经过tr行变色。
$(function(){
//treeTable1为table的id
$("#treeTable1 tr").mouseover(function (){$(this).addClass("odd_tr");});
$("#treeTable1 tr").mouseout(function (){$(this).removeClass("odd_tr");});
});
2、鼠标经过tr行变色。
<s:iterator value="#request.pager.list" status="stuts">
<s:if test="#stuts.index % 2 == 0 ">
<tr class="even_tr">
</s:if>
<s:elseif test="#stuts.index % 2 != 0 ">
<tr class="odd_tr">
</s:elseif>
<td width="50px" >id</td>
<td >name</td>
<td >age</td>
</tr>
</s:iterator>