2008年12月29日星期一

Html--表格中选中多行改变背景色,兼容ie5.5+,ff

<html>
<head>
<script>
/*firefox*/
function __firefox(){
HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style);
window.constructor.prototype.__defineGetter__("event", __window_event);
Event.prototype.__defineGetter__("srcElement", __event_srcElement);
}
function __element_style(){
return this.style;
}
function __window_event(){
return __window_event_constructor();
}
function __event_srcElement(){
return this.target;
}
function __window_event_constructor(){
if(document.all){
return window.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
if(window.addEventListener){
__firefox();
}
/*end firefox*/
</script>
<script language=javascript>
/************************************************************************
*函 数 名:ChangeRowBg(row)
*功能描述:鼠标指向表格中的一行时,该行背景色改变,点击行时,突出显示标记颜色
*注:1.在tr中添加事件:onmouseover,onmouseout,onmousedown
* 2.在tr中如有下载链接(如下载Word文档),请将target设为_blank,否则可能出js错
*入 参:row--tr对象
*创 建 人:夏春涛 xchuntao@163.com qq:23106676
*创建时间:2005-07-01
************************************************************************/
//全局变量
var OldRowBgColor;
var NewRowBgColor = "#b5c5e6"; //用小写
var MarkRowBgColor = "#ff9933"; //用小写
function ChangeRowBg(row)
{
if (event.type=='mouseover')
{
/*
RowBgColor = event.srcElement.parentElement.bgColor;
event.srcElement.parentElement.bgColor = "#b5c5e6";
*/
/*
RowBgColor = event.srcElement.parentElement.style.backgroundColor
event.srcElement.parentElement.style.backgroundColor = "#b5e5e6";
*/
OldRowBgColor = row.style.backgroundColor
row.style.backgroundColor = NewRowBgColor

}
else if (event.type=='mouseout')
{
row.style.backgroundColor = OldRowBgColor;
}
else if (event.type=='mousedown')
{
if (row.style.backgroundColor != MarkRowBgColor)
{
row.style.backgroundColor = MarkRowBgColor;
row.onmouseout = function(){return false;}
row.onmouseover= function(){return false;}
}
else
{
row.style.backgroundColor = NewRowBgColor ;
row.onmouseout = function(){ ChangeRowBg(row);}
row.onmouseover= function(){ ChangeRowBg(row);}
}
}
}
</script>
</head>
<body>
<table align=center width=500 bgcolor="#669999" border=1 cellspacing=0>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a href="tr.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a href="tr.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a href="tr.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a href="tr.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a href="tr.htm">TestLink</td>
</tr>
</table>
</body>
</html>

没有评论:

发表评论