您的位置：首页 > Web前端 > JQuery

jQuery轻松实现表格的隔行变色，点击行变色

2012-06-20 17:41 741 查看

jQuery轻松实现表格的隔行变色，点击行变色：

<!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>使用jquery设置表格样式</title>

< style>

.even{

background-color:red;

}

.odd{

background-color:green;

}

.selected{

background-color:#FF6;

}

.se{

background-color:#666;

}

< /style>

< script language="javascript" src="../../include/jquery.js"></script>

< script>

$(document).ready(function(){

//隔行表色

$("tr:even").addClass("even");

$("tr:odd").addClass("odd");

//点击变色

$("tr").toggle(

function(){

$(this).addClass("selected");

},function (){

$(this).removeClass("selected");

}

);

//滑动变色

$("tr").mouseover(function (){

$(this).addClass("se");

}).mouseout(function (){

$(this).removeClass("se");

});

});

< /script>

< /head>

<body>

< table width="500" border="1" align="center">

<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>

< /body>

< /html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航