HTML表格鼠标滑过变色和奇数偶数行变色+点击变色

来源：互联网发布：网页源码查看 apk 编辑：程序博客网时间：2024/04/25 07:21

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<script src="jQuery-2.1.0/jquery-2.1.0.js"></script>

<style type="text/css">

.body_div{ width:366px;

height:388px;

font-size: 16px;

background-color: #CCCCCC;

}

.tr_odd {

background-color: orange;

}

.tr_even{

background-color: aqua;

}

.mouse_color{

background-color: green;

}

.mousedown_mouseup_color{

background-color:red;

}

#tab{

border: 1px #FF0000 solid;

text-align: center;

width: 100%;

height: 100%;

}

</style>

<script type="text/javascript">

$(function(){

/*//设置奇数行背景色

$("#tab tr:odd").addClass("tr_odd");

//设置偶数行背景色

$("#tab tr:even").addClass("tr_even");*/

// 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )

$("#tab tr").mousemove(function(){

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

});

// 鼠标移出行的颜色:离开当前行，颜色恢复

$("#tab tr").mouseout(function(){

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

});

// 鼠标按下所在列的颜色:鼠标左键按下，颜色改变

$("#tr td").mousedown(function(){

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

});

// 鼠标抬起所在列的颜色:鼠标左键抬起，颜色恢复

$("#tr td").mouseup(function(){

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

});

});

</script>

</head>

<body>

<center>

<div class="body_div">

<table id="tab" border="1" cellspacing="0" cellpadding="1" align="center" >

<tr id="tr" bgcolor="#999999" style="font-weight:bolder; font-size:23px;">

<td>姓名</td>

<td>年龄</td>

<td>性别</td>

</tr>

<tr id="tr" bgcolor="#0066FF">

<td>张三</td>

<td>20</td>

<td>男</td>

</tr>

<tr id="tr" bgcolor="#FFCC00">

<td>李四</td>

<td>21</td>

<td>女</td>

</tr>

<tr id="tr" bgcolor="#CC33FF">

<td>王五</td>

<td>22</td>

<td>男</td>

</tr>

<tr id="tr" bgcolor="#00FF99">

<td>赵六</td>

<td>23</td>

<td>女</td>

</tr>

</table>

</div>

</center>

</body>
</html>

阅读全文

0 0

HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色

HTML表格鼠标滑过变色和奇数偶数行变色+点击变色