html设置鼠标移动变色,table行随鼠标移动变色示例

2024-05-10 04:07:58

1、设计表格

工号	姓名	年龄	性别
2014010101	张峰	56	男
2014010102	李玉	42	女
2014010103	王珂	36	男
2014010104	张钰	31	女
2014010105	朱顾	44	男
2014010106	胡雨	35	女
2014010107	刘希	30	男
2014010108	孙宇	45	女
2014010109	谷雨	33	男
2014010110	科宇	45	女

2、设计样式

.html_body .body_div{

width: 1340;

height: 595;

}

.body_div{

font-size: 12px;

background-color: #CCCCCC;

}

.tr_odd{

background-color: orange;

}

.tr_even{

background-color: aqua;

}

.mouse_color{

background-color: green;

}

#tab{

border: 1px #FF0000 solid;

text-align: center;

width: 100%;

height: 100%;

}

3、设计JS

//设置奇数行背景色

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

//设置偶数行背景色

$("#tab tr:even").find("td").addClass("tr_even");

/**

* 鼠标移到的颜色

*/

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

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

});

/**

* 鼠标移出的颜色

*/

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

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

});

4、设计结果

(1)初始化

(2)单击奇数行

(3)单击偶数行

5、附录

table随鼠标变色

.html_body .body_div{

width: 1340;

height: 595;

}

.body_div{

font-size: 12px;

background-color: #CCCCCC;

}

.tr_odd{

background-color: orange;

}

.tr_even{

background-color: aqua;

}

.mouse_color{

background-color: green;

}

#tab{

border: 1px #FF0000 solid;

text-align: center;

width: 100%;

height: 100%;

}

$(function(){

//设置奇数行背景色

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

//设置偶数行背景色

$("#tab tr:even").find("td").addClass("tr_even");

/**

* 鼠标移到的颜色

*/

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

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

});

/**

* 鼠标移出的颜色

*/

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

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

});

});

工号	姓名	年龄	性别
2014010101	张峰	56	男
2014010102	李玉	42	女
2014010103	王珂	36	男
2014010104	张钰	31	女
2014010105	朱顾	44	男
2014010106	胡雨	35	女
2014010107	刘希	30	男
2014010108	孙宇	45	女
2014010109	谷雨	33	男
2014010110	科宇	45	女

html设置鼠标移动变色,table行随鼠标移动变色示例相关推荐

关于鼠标移到gridview行上，背景变色的问题。
这里鼠标的背景颜色为图片,用图片显示鼠标背景颜色. 首先,要在css中调用鼠标图片.我这里把鼠标背景.gif 放在同一个根目录下. <title>无标题页</title> & ...
实现table鼠标移动改变table行背景色
Code <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...
鼠标划过表格行变色效果JS
 <script type="text/javascript"> /* 当鼠标移到表格上是,当前一行 ...
JavaScript如何给Table行设置颜色？
1.首先,在CSS文件中定义要设置的颜色.比如, .resetrowscolor { background-color: red; } 2.在要显示的页面中引入该CSS文件,比如 <li ...
CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效禁止文本换行
1. 禁止文本换行的CSS: white-space:nowrap; strict mode下在IE7和FF中都正常,以前IE用的word-break.word-wrap属性对FF无效. 2. ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
Gridview行随鼠标变色
在GridView的RowDataBound()事件添加如下代码: 1 protected void GridView1_RowDataBound(object sender, GridVi ...
转： GridView：当鼠标滑过，行的背景颜色发生变化
前提条件:GridView已经能正常的显示数据了! 这里我将NorthWind数据库的Category表显示出来,接着我们要是实现以下三个功能: 1.将GridView中满足CategoryID为偶数 ...
jquery 表格（鼠标悬停改变改变行背景+隔行换色）
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
java操作跨页的word cell_Java 创建Word表格/嵌套表格、添加/复制表格行或列、设置表格跨页断行...
概述表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在W ...

最新文章

热门文章