软件学堂

网游分类软件分类

JS代码实现单击单元格背景变色

2012-10-30 来源:网络

【实例名称】

JS代码实现单击单元格背景变色

【实例描述】

当单机单元格时,让单元格的背景发生变化,以突出用户的选择。本例学习如何动态改变单元格的背景色。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <style> .clickTD{    background-color:#ff0000;    text-decoration:none;} </style>

<script language="javascript"> function colorChange(t) {  for (var i=0; i<t.rows.length; i++)   //遍历行    for (var j=0; j<t.rows[i].cells.length; j++)//遍历列       t.rows[i].cells[j].className = t.rows[i].cells[j] == event.srcElement ? 'clickTD' : '' //改变背景色 } </script>

</head> <body> <table border="1" onClick="colorChange(this)">  <tr>  <td>第一行</td><td>第一行第二列</td>  </tr>  <tr>  <td>第二行</td><td>第二行第二列</td>  </tr> </table> <p> </body> </html>

 

【运行效果】

运行效果

【难点剖析】

本例的两个重点是如何遍历表格的行和列,以及如何使用三元运算符。“?”。用“rows.lenght”可以获取表格的行数,然后用“rows[i]"获取某行.用“cell.1ength”获取表格的列数,然后用“cells[j]”获取某列:三元运算符“?:”的使用语法如下所示:当满足条件时,将选择“?”后面第一个值,否则选择第二个。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:单击单元格背景变色 进行本实例源码下载 

上一篇:JS代码实现表格按Enter键自动生成新行
下一篇:PS图片处理:制作五彩斑斓的霓虹灯文字效果

相关文章