js改變選擇的行顏色
一
<html>
<script>
//點選當前選中行的時候設定當前行的顏色，同時恢復除當前行外的行的顏色及滑鼠事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i<sTable.rows.length;i++) //遍歷除第一行外的所有行
{
if (sTable.rows[i] != target) //判斷是否當前選定行
{
sTable.rows[i].bgColor = "#ffffff"; //設定背景色
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
}
else
{
sTable.rows[i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; //去除滑鼠事件
sTable.rows[i].onmouseout = ""; //去除滑鼠事件
}
}
}
//移過時tr的背景色
function rowOver(target)
{
target.bgColor='#e4e4e4';
}
//移出時tr的背景色
function rowOut(target)
{
target.bgColor='#ffffff';
}
//恢復tr的的onmouseover事件配套呼叫函式
function resumeRowOver()
{
rowOver(this);
}
//恢復tr的的onmouseout事件配套呼叫函式
function resumeRowOut()
{
rowOut(this);
}
</script>
<body>
<div style="width:50px;height:50px;background-color:Blue" onmouseover="javascript:this.style.backgroundColor='red';"
onmouseout="javascript:this.style.backgroundColor='blue'">
關於最後兩個函式resumeRowOver和resumeRowOut為什麼這樣寫參考我之前寫的通過js
對應的表格HTMLview plaincopy to clipboardprint?
</div>
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable">
<tr>
<th>服務事項</th>
<th>N</th>
<th>狀態</th>
<th>辦結</th>
<th>資料</th>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
</body>
</html>
二
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>澷??暥瀮</title>
</head>
<script language="JavaScript1.1">
var t2;
function check_trcolor(o)
{
if(t2)
{
t2.bgColor='#CCCCCC';
t2.style.color='';
}
o.bgColor='#CFE4FF';
o.style.color='#000000';
o.style.cursor='hand';
t2=o;
}
</script>
<body>
<table width="760" border="0" cellpadding="1" cellspacing="1">
<tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
<td height="22" > </td>
</tr>
<tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
<td height="22"> </td>
</tr>
<tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
<td height="22"> </td>
</tr>
<tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
<td height="22"> </td>
</tr>
</table>
</body>
</html>