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

时间：2023-03-09 07:42:07
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=;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=;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>

相关文章