DOM操作--表格点击行变色

点击表格行变色这种网页效果应该还是比较常见的。
大家应该看见了,我这里的效果是用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>

 

 

你可能感兴趣的:(dom)