点击表格行变色，这种网页效果应该还是比较常见的。
大家应该看见了，我这里的效果是用DOM操作实现的，那么很多人会问什么是DOM操作，贴出代码之前我就和大家解释一下什么是DOM操作：
DOM是Document Object Model的缩写，意思是文档对象模型，是由W3C制定的一套访问和操作XML（eXtensible Markup Language）文档的标准，即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记（Tag）。根据W3C DOM规范(http://www.w3.org/DOM)，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> <meta http-equiv="description" content="this is my page" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href=".mycss.css"> <title>无标题文档</title> <script type="text/javascript"> function initEvent(){ //获取id为tableColor的表格 var tableCol=document.getElementById("tableColor"); //获取表格中所有的行 var trs=tableCol.getElementsByTagName("tr"); //循环遍历所有行 for(var i=0;i<trs.length;i++){ var tr=trs[i]; //动态给当前行注册点击事件 tr.onclick=tronClick; //设置鼠标样式 tr.style.cursor="pointer"; } } function tronClick(){ var tableCol=document.getElementById("tableColor"); var trs=tableCol.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ //若点击当前行，则变为黄色 if(trs[i]==this){ trs[i].style.background="yellow"; } //其他所有行变为白色 else{ trs[i].style.background="white"; } } } </script> </head> <body onload="initEvent()"> <table id="tableColor" border=1px> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr> </table> </body> </html>