//初学者可以看下挺简单的实现方法
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行变色</title>
<style type="text/css">
.one{
background:#C00;
}
.two{
background:#09F;
}
.three{
background:#039;
}
.four{
background:#FFF;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("tr").mouseover(function(){
$(this).addClass("four");
})
$("tr").mouseout(function(){
$(this).removeClass("four");
})
$("tr:first").addClass("three");
$("tr:last").addClass("three");
$("tr:even").addClass("one");
$("tr:odd").addClass("two");
});
</script>
</head>
<body>
<table width="300" border="1" class="table_gehang">
<tr class="title">
<td>你好吗</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
jQuery实现table表格隔行换色鼠标经过变色
最新推荐文章于 2021-08-19 16:36:26 发布