jQuery学习心得----鼠标经过时改变table行的背景色
2016-08-30 11:33
381 查看
学习了jQuery选择器，下面给大家一个关于选择器的例子，注释很详细，大家可以自己体会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入jQuery，因为举例，所以直接网上引一个，一般可以去官网下一个jQuery包-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<title>Title</title>
</head>
<body>
<style type="text/css">
.tr1{background-color: #FF9933;}
</style>
<script language="JavaScript">
$(function(){
//$("#tb tr")--选择id为tb的table，再选择该table的行tr
// mouseover--鼠标放上去的事件（悬停）
//$("#tb tr").mouseover();--给tb的行tr添加鼠标悬停事件
$("#tb tr").mouseover(function(){
$(this).addClass("tr1");//添加样式tr1，$(this)表示当前选择的元素。
});
// mouseout--鼠标离开的事件
$("#tb tr").mouseout(function(){
$(this).removeClass("tr1");//去掉样式tr1
});
});
</script>
<table border="2" align="center" id="tb">
<tbody>
<tr height="40">
<td align="center" colspan="3">商品表</td>
</tr>
<tr height="40">
<td ></td>
<td >商品编号</td>
<td >价格（元）</td>
</tr>
<tr height="40">
<td >A商场</td>
<td >pp02333</td>
<td >234</td>
</tr>
<tr height="40">
<td >B商场</td>
<td >pp56333</td>
<td >231</td>
</tr>
<tr height="40">
<td >C商场</td>
<td >pp97833</td>
<td >541</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入jQuery，因为举例，所以直接网上引一个，一般可以去官网下一个jQuery包-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<title>Title</title>
</head>
<body>
<style type="text/css">
.tr1{background-color: #FF9933;}
</style>
<script language="JavaScript">
$(function(){
//$("#tb tr")--选择id为tb的table，再选择该table的行tr
// mouseover--鼠标放上去的事件（悬停）
//$("#tb tr").mouseover();--给tb的行tr添加鼠标悬停事件
$("#tb tr").mouseover(function(){
$(this).addClass("tr1");//添加样式tr1，$(this)表示当前选择的元素。
});
// mouseout--鼠标离开的事件
$("#tb tr").mouseout(function(){
$(this).removeClass("tr1");//去掉样式tr1
});
});
</script>
<table border="2" align="center" id="tb">
<tbody>
<tr height="40">
<td align="center" colspan="3">商品表</td>
</tr>
<tr height="40">
<td ></td>
<td >商品编号</td>
<td >价格（元）</td>
</tr>
<tr height="40">
<td >A商场</td>
<td >pp02333</td>
<td >234</td>
</tr>
<tr height="40">
<td >B商场</td>
<td >pp56333</td>
<td >231</td>
</tr>
<tr height="40">
<td >C商场</td>
<td >pp97833</td>
<td >541</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DataGrid GridView 隔行换色 鼠标经过改变背景色
- 如何使鼠标经过datagrid的列时，该列背景色改变
- [javaScript]改变鼠标经过表格行背景色
- DataGrid GridView 隔行换色 鼠标经过改变背景色
- 鼠标经过变大1.2倍、旋转360度并改变背景色。
- jquery 表格（鼠标悬停列标题，改变该列的背景色）
- jQuery改变鼠标经过行的背景颜色
- jquery动态添加的表格行鼠标经过时候改变行的背景颜色
- jQuery 实现 当鼠标放表格行上的时候改变背景色。
- AspXGridView鼠标经过改变行背景色与自定义列显示内容
- jquery鼠标经过导航条改变背景图
- 鼠标经过单元格改变背景色
- jquery练习5 鼠标经过改变样式(TBC)
- JQuery------实现鼠标摁下抬起时div背景色改变
- WinForm------TreeList实现鼠标经过节点背景色改变
- 鼠标经过时，改变div块的背景色
- jsp制作复合表头并循环产生表格内容，控制隔行变色、鼠标经过改变背景色等操作