HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色
<!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>
HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色相关推荐
- 表格偶数奇数行颜色PHP,HTML-表格的奇数偶数行颜色不同
/* *Copyright (c) 2017,烟台大学计算机学院 All rights reserved. *文件名称:关于HTML的练习 *作 者:张晴晴 *完成日期:201711月5日 *版 本 ...
- shell 删除奇数偶数行
今天总结一个正则的东西匹配和替换的删除奇数行和偶数行来理解模式空间以及模式空间是如何保存.标记数据的 删除偶数行: %s/\(^.*$\)\n^.*$/\1/g 删除奇数行: %s/^.*$\n\(^ ...
- python列表中删除奇数行_shell 删除奇数偶数行
今天总结一个正则的东西匹配和替换的删除奇数行和偶数行来理解模式空间以及模式空间是如何保存.标记数据的 删除偶数行: %s/\(^.*$\)\n^.*$/\1/g 删除奇数行: %s/^.*$\n\(^ ...
- python输出0到50间的偶数_python奇数偶数行输出_python对输出的奇数偶数排序实例代码...
我们从小学的时候就学习了奇数偶数,知道整数可以分成奇数和偶数两大类,能被2整除的数叫做偶数,不能被2整除的数叫做奇数.在我们python编程中,会遇到很多数字和代码,有的时候会很乱,不好操作. 在遇到 ...
- python奇数偶数行输出_python对输出的奇数偶数排序实例代码
我们从小学的时候就学习了奇数偶数,知道整数可以分成奇数和偶数两大类,能被2整除的数叫做偶数,不能被2整除的数叫做奇数.在我们python编程中,会遇到很多数字和代码,有的时候会很乱,不好操作. 在遇到 ...
- HTML-表格的奇数偶数行颜色不同
/* *Copyright (c) 2017,烟台大学计算机学院 All rights reserved. *文件名称:关于HTML的练习 *作 者:张晴晴 *完成日期:201711月5日 *版 本 ...
- python numpy 奇数偶数行互换_python 列表推导式(经典代码)(21)
文章首发微信公众号,微信搜索:猿说python 截止到目前为止,python基础内容已经学习了50%左右,在学习编程过程中,我们不仅要学习python语法,同时也需要学习如何把自己代码写的更美观,效率 ...
- WPS显示 只奇数偶数行方法
1.空白行输入: =IF(MOD(ROW(),2)=1,"奇","偶") 2.再自动筛选即可
- select自定义箭头问题 。。。和一行内不同颜色的整体鼠标滑过变色
1.select自定义箭头问题 用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有 ...
最新文章
- 华为机考HJ8合并表记录
- 复杂问题需要系统思维
- JRuby大捷：ThoughtWorks宣布Mingle发布在即
- 离散数学平面图对偶图和着色问题
- Memcached 缓存个体，对象，泛型，表
- csv文件怎么转成excel_Java读写excel,excel转成json写入磁盘文件
- Java学习二：Javac Java的学习（原创）
- 【剑指offer】面试题57：和为s的两个数字（Java）
- 滤波器设计（二）模拟到数字
- （94）FPGA 两个触发器时序分析模型中，涉及到哪些参数？，面试必问（十八）（第19天）
- springBoot框架方法上面添加@Transactional注解的使用
- python输入字符串str_python字符串String模块
- 如何使用GDAL进行图像镶嵌
- python爬虫代码-学Python=写爬虫？不用代码也能爬下95%网站的数据！
- 为了拿Ph.D而做出的诺贝尔奖
- 苏宁易购实现逆势增长，但它的非电业务更超出意料
- 四分位距IQR interquartile range
- vue-element-admin整合spring-boot实现权限控制之用户管理篇
- 面向Web开发人员和网站管理员的Web缓存指南
- Python函数的参数列表