信鸽网

JavaScript实现点击单元格改变背景色的方法

  作者：bea

本文实例讲述了JavaScript实现点击单元格改变背景色的方法。分享给大家供大家参考，具体如下： <html><body><table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"><tr><td width="93" height="29" background="hotlinkbg.

本文实例讲述了JavaScript实现点击单元格改变背景色的方法。分享给大家供大家参考，具体如下：




<html>

<body>

<table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="93" height="29" background="hotlinkbg.gif" align="center">出租信息</td>

<td width="93" height="29" background="hotlinkbg.gif" align="center">求租信息</td>

<td width="314" height="29" background="hotlinkbg.gif" ></td>

</tr>

</table>

<table width="500">

<tr>

<td>aaaaa</td>

<td>bbbbb</td>

<td>ccccc</td>

<td>ddddd</td>

</tr>

</table>

<script tyle="text/javascript">

var oldClr = new Array()

function SetColor(e)

{

 if (!e) e = window.event;

 var obj

 if(window.event)

 obj = e.srcElement

 else

 obj = e.target

if(obj.tagName != "TD") return

var oldTD = obj

 while( obj.tagName != "TR")

 obj = obj.parentNode

 var i

 for(i = 0;i<obj.cells.length;i++)

 {

 if(obj.cells[i] == oldTD) break

 }

 var table = document.getElementById("_t")

 for(j = 0;j<table.rows.length;j++)

 {

 //如果要删除其它列的颜色，请加上下面的3行

 for(m = 0;m < table.rows[j].cells.length;m++)

 {

  table.rows[j].cells[m].background = oldClr[m]

 }

  //table.rows[j].cells[i].bgColor = table.rows[j].cells[i].background="button1_on.gif"

  table.rows[j].cells[i].background = table.rows[j].cells[i].background==oldClr[i]?"button1_on.gif":oldClr[i]

 }

}

window.onload = function()

{

 var table = document.getElementById("_t")

 for(j = 0;j<table.rows[0].cells.length;j++)

 {

 oldClr[j] = table.rows[0].cells[j].background

 }

}

</script>

</body>

</html>


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《JavaScript运动效果与技巧汇总》及《JavaScript错误与调试技巧总结》


希望本文所述对大家JavaScript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: