这里我直接贴上代码，在代码上稍作解释：<!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 runat="server">
<title>无标题页</title>
//导入jquery库文件~！
<. type="text/." src="../JS/jquery.js"></.>
<. language =. >
//html载入完毕后运行$(document).ready() $(document).ready(function(){ //为类型名为csstab标签的tr子标签添加mouseover 和 mouseout方法，mouseout在mouseover 后执行,addClass和removeClass分别添加类和移除类样式~！
$(".csstab tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}) //为偶数tr，添加样式~！
$(".csstab tr:even").addClass("alt");
});
</.>
<style type ="text/css" >
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
cursor:pointer;
}
</style>
</head>
<body>
<h1>
用jquery实现双色表格，鼠标移动到上面时，行变色~！</h1>
<form id="form1" runat="server">
<div>
<table width =400 class ="csstab" cellspacing =0>
<thead>
<tr>
<th>
姓名</th>
<th>
年龄</th>
<th>
性别</th>
<th>
QQ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
自己可考代码看下运行效果~！ 这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？ 我们来看看，本来应该写成这样子的： $(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })但是我们写成了： $(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付
用jquery实现双色表格，鼠标移动到上面时，行变色~！
2018-08-30 22:38:29
浏览 2238
- 相关标签
- JQuery
随时随地看视频慕课网APP
相关课程
