<html>
<head>
<title>变色表格</title>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="JavaScript">![](https://www.cnblogs.com/Images/dot.gif)
function anole (
str_tableid, // table id
num_header_offset, // 表头行数
str_odd_color, // 奇数行的颜色
str_even_color, // 偶数行的颜色
str_mover_color, // 鼠标经过行的颜色
str_onclick_color // 选中行的颜色
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
)
{
// 表格ID参数验证
if (!str_tableid) return alert (str_tableid+"表格不存在!");
var obj_tables = (document.all ? document.all[str_tableid] :
![](/Images/OutliningIndicators/InBlock.gif)
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);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function tt_init_table (obj_table, col_config)
{
var col_lconfig = [],
col_trs = obj_table.rows;
if (!col_trs) return;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = col_config.header_offset; i < col_trs.length ; i++)
{ //i 从 表头以下开
![](/Images/OutliningIndicators/InBlock.gif)
始
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();
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function tt_set_color(str_color)
{
this.style.backgroundColor = str_color;
}
// 事件操作
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function tt_mover ()
{
if (this.lconfig.clicked != this)
this.set_color(this.config.mover_color);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function tt_mout ()
{
if (this.lconfig.clicked != this)
this.set_color(this.order ? this.config.odd_color : this.config.even_color);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function tt_onclick ()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.lconfig.clicked == this)
{
this.lconfig.clicked = null;
this.onmouseover();
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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>
![](/Images/OutliningIndicators/None.gif)
</head>
![](/Images/OutliningIndicators/None.gif)
<body>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
<table id="demo" cellpadding=0 cellspacing=0 style="border:1px solid #ccc" align="center">
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
<tr>
<td style="width:600px; height:20px;"></td>
</tr>
![](/Images/OutliningIndicators/None.gif)
</table>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="JavaScript">![](https://www.cnblogs.com/Images/dot.gif)
anole('demo', 0, '#ffffff', '#f6f6f6', '#f0f0f0', '#cc99ff');
</script>
![](/Images/OutliningIndicators/None.gif)
</body>
</html>
以上JS代码来自互联网,出处忘了
posted @
2007-08-28 09:01
M'
阅读(
480)
评论()
编辑
收藏
举报