當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

实现table鼠标移动改变table行背景色

發布時間：2025/3/20 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了实现table鼠标移动改变table行背景色小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Code
<html?xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">

<title>css-Table布局中單元格background-color鼠標響應的JS代碼</title>

<script?language="javascript">

var?aTDClick=new?Array(3);

function?onColor(td,n)

{

if(!aTDClick[n-1]){

td.style.backgroundColor='#FFFF99';

td.style.color='#0600FF';

}else{

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

}

}

function?onClickColor(td,n)

{

switch(n)

{

case?1:

if(aTDClick[0]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[0]=true;

}else{

TR1.style.backgroundColor='';

TR1.style.color='';

aTDClick[0]=false;

}

TR2.style.backgroundColor='';

TR2.style.color='';

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[1]=false;

aTDClick[2]=false;

break;

case?2:

if(aTDClick[1]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[1]=true;

}else{

TR2.style.backgroundColor='';

TR2.style.color='';

aTDClick[1]=false;

}

TR1.style.backgroundColor='';

TR1.style.color='';

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[0]=false;

aTDClick[2]=false;

break;

case?3:

if(aTDClick[2]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[2]=true;

}else{

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[2]=false;

}

TR2.style.backgroundColor='';

TR2.style.color='';

TR1.style.backgroundColor='';

TR1.style.color='';

aTDClick[1]=false;

aTDClick[0]=false;

break;

}

}

function?offColor(td,n)

{

if(!aTDClick[n-1]){

td.style.backgroundColor='';

td.style.color='';

}else{

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

}

}

</script>

<style?type="text/css">

.light?{

font:?normal?9pt?"宋體";

color:?#000000;

text-decoration:?none;

background:?#FFFFFF;

cursor:?default;

}

.tdstyle?{

border:?1px?dashed?#0099CC;

}

</style>

</head>

<body>

<table?width="100%"?border="0"?cellspacing="4"?cellpadding="0">

<tr?id="TR1"?class="light"?onMouseOver="onColor(this,1);"?onMouseOut="offColor(this,1);"?onClick="onClickColor(this,1);">

<td?class="tdstyle"?height="25">第一行</td>
<td?class="tdstyle"?height="25">第三行</td>
</tr>

<tr?16:15?2009-4-23>

<td?class="tdstyle"?height="25">第二行</td>
<td?class="tdstyle"?height="25">第三行</td>
</tr>

<tr?id="TR3"?class="light"?onMouseOver="onColor(this,3);"?onMouseOut="offColor(this,3);"?onClick="onClickColor(this,3);">

<td?height="25">第三行</td>
<td??height="25">第三行</td>
</tr>
<tr??class="light"?onMouseOver="onColor(this,3);"?onMouseOut="offColor(this,3);"?onClick="onClickColor(this,3);">

<td?height="25">第三行</td>
<td??height="25">第三行</td>
</tr>
</table>

</body>

</html>

轉載于:https://www.cnblogs.com/jlydboy/articles/1442194.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的实现table鼠标移动改变table行背景色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SQL Server 2005系列教学_
下一篇：捕获SocketConnection组件