当前位置:  编程技术>WEB前端

table行随鼠标移动变色示例

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1、设计表格 代码如下: 工号 姓名 年龄 性别 2014010101 张峰 56 男 2014010102 李玉 42 女 2014010103 王珂 36 男 2014010104 张钰 31 女 2014010105 朱顾 44 男 2014010106 胡雨 35 女 2014010107 刘希 30 男 2014010108 孙宇 45 女 2014010109 谷...

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







    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 怎么样使table中的每条记录在鼠标over时变颜色??????????????急
  • 请问如何即时刷新table中鼠标所选中的那条记录?程序代码见内。高分请教
  • jquery实现的鼠标拖动排序Li或Table
  • java命名空间javax.swing.table类jtableheader的类成员方法: table定义及介绍
  • mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table定义及介绍
  • 我在table中选中一行删除后,数据库中是删除了,但我的table中这一行还显示,我怎么让他不显示??
  • java命名空间javax.accessibility类accessiblerole的类成员方法: table定义及介绍
  • 用new JTalbe(10, 20)创建了一个table,如何设置该table列(column)的宽度
  • java命名空间javax.swing.plaf.basic类basictableui的类成员方法: table定义及介绍
  • Table Library iis7站长之家
  • java命名空间javax.swing.text.html类html.tag的类成员方法: table定义及介绍
  • GTK编程~我在hpanel里加了一个4*1table~里面放了四个button~怎么设置可以使四个button之间有一定的距离~设置table 的边框么?请教下怎么让app的界面固定~不能最大化
  • java命名空间javax.swing.table类jtableheader的类成员方法: gettable定义及介绍
  • Table Library
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table_header定义及介绍
  • 困惑很久的问题,一个实体BEAN只能对应一个TABLE吗?如果有几百个TABLE,难道要写几百个实体BEAN?
  • java命名空间javax.sql.rowset.spi类syncprovider的类成员方法: datasource_table_lock定义及介绍
  • IP Tables State
  • java命名空间javax.swing.table类jtableheader的类成员方法: getcolumnmodel定义及介绍
  • 关于定死table宽度
  • java命名空间javax.swing.table类tablecolumn的类成员方法: identifier定义及介绍
  • 运行insmod ip_tables后,reboot后又无效了?
  • java命名空间javax.accessibility类accessiblecontext的类成员方法: accessible_table_model_changed定义及介绍
  • Table Scroller


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3