zoukankan
html css js c++ java
变色表格
<
html
>
<
head
>
<
title
>
变色表格
</
title
>
<
script
language
="JavaScript"
>
function
anole (
str_tableid,
//
table id
num_header_offset,
//
表头行数
str_odd_color,
//
奇数行的颜色
str_even_color,
//
偶数行的颜色
str_mover_color,
//
鼠标经过行的颜色
str_onclick_color
//
选中行的颜色
)
{
//
表格ID参数验证
if
(
!
str_tableid)
return
alert (str_tableid
+
"
表格不存在!
"
);
var
obj_tables
=
(document.all
?
document.all[str_tableid] :
document.getElementById(str_tableid));
if
(
!
obj_tables)
return
alert (
"
ID为 (
"
+
str_tableid
+
"
)不存在!
"
);
//
设置个参数的缺省值
var
col_config
=
[];
col_config.header_offset
=
(num_header_offset
?
num_header_offset :
0
);
col_config.odd_color
=
(str_odd_color
?
str_odd_color : '#ffffff');
col_config.even_color
=
(str_even_color
?
str_even_color : '#dbeaf5');
col_config.mover_color
=
(str_mover_color
?
str_mover_color : '#6699cc');
col_config.onclick_color
=
(str_onclick_color
?
str_onclick_color : '#4C7DAB');
//
初始化表格(可能多个表格用同一个ID)
if
(obj_tables.length)
for
(
var
i
=
0
; i
<
obj_tables.length; i
++
)
tt_init_table(obj_tables[i], col_config);
else
tt_init_table(obj_tables, col_config);
}
function
tt_init_table (obj_table, col_config)
{
var
col_lconfig
=
[],
col_trs
=
obj_table.rows;
if
(
!
col_trs)
return
;
for
(
var
i
=
col_config.header_offset; i
<
col_trs.length ; i
++
)
{
//
i 从 表头以下开
始
col_trs[i].config
=
col_config;
col_trs[i].lconfig
=
col_lconfig;
col_trs[i].set_color
=
tt_set_color;
col_trs[i].onmouseover
=
tt_mover;
col_trs[i].onmouseout
=
tt_mout;
col_trs[i].onmousedown
=
tt_onclick;
col_trs[i].order
=
(i
-
col_config.header_offset)
%
2
;
col_trs[i].onmouseout();
}
}
function
tt_set_color(str_color)
{
this
.style.backgroundColor
=
str_color;
}
//
事件操作
function
tt_mover ()
{
if
(
this
.lconfig.clicked
!=
this
)
this
.set_color(
this
.config.mover_color);
}
function
tt_mout ()
{
if
(
this
.lconfig.clicked
!=
this
)
this
.set_color(
this
.order
?
this
.config.odd_color :
this
.config.even_color);
}
function
tt_onclick ()
{
if
(
this
.lconfig.clicked
==
this
)
{
this
.lconfig.clicked
=
null
;
this
.onmouseover();
}
else
{
var
last_clicked
=
this
.lconfig.clicked;
this
.lconfig.clicked
=
this
;
if
(last_clicked) last_clicked.onmouseout();
this
.set_color(
this
.config.onclick_color);
}
}
</
script
>
</
head
>
<
body
>
<
table
id
="demo"
cellpadding
=0
cellspacing
=0
style
="border:1px solid #ccc"
align
="center"
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
<
tr
>
<
td
style
="600px; height:20px;"
></
td
>
</
tr
>
</
table
>
<
script
language
="JavaScript"
>
anole('demo',
0
, '#ffffff', '#f6f6f6', '#f0f0f0', '#cc99ff');
</
script
>
</
body
>
</
html
>
以上JS代码来自互联网,出处忘了
查看全文
相关阅读:
Python-流程控制之if判断
Python-流程控制之循环
Python-基本运算符
Python-基本运算符
Python-数据类型的基本使用
python2中与用户交互
Python-内存管理
vue 替换表格中的数据
实现单例的三个方法
django----框架介绍
原文地址:https://www.cnblogs.com/yiki/p/872289.html
最新文章
闭包函数及装饰器
冒泡算法,选择排序算法,插入排序算法,快速排序算法,归并排序算法,计数排序算法,链表算法(单例)
django里post请求问题
[ Python ] set集合及函数的使用
haystack
celery
单例模式
admin组件使用
django-debug-toolbar 使用方式(效果-页面右侧有各项配置面板,点击即可查看各种调试信息。)
Django认证系统
热门文章
学习python课程第二十八天
学习python课程第二十七天
学习python课程第二十六天
作业 十三.
学习python课程第二十四天。
学习python课程第二十三天
学习python课程第二十二天
学习python课程第二十一天
Python-字符串类型
Python-数据类型
Copyright © 2011-2022 走看看