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

DOM操作--表格点击行变色的更多相关文章

  1. DOM操作表格

    前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...

  2. DOM系列---DOM操作表格

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...

  3. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  4. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  5. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  6. DOM 操作表格

    操作表格<table>标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它.(PS:HTML DOM 提供了更加方便快捷的方式来操作 ...

  7. DOM操作表格——HTML DOM

    html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...

  8. element表格点击行即选中该行复选框

    关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...

  9. jquery选中表格的某行变色

    <tr ng-click="+"selectRow("+i+");"+" ng-mouseover="+"chan ...

随机推荐

  1. Linux查看硬件信息，主板型号及内存硬件，驱动设备，查看设备，查看CPU。

    用硬件检测程序kuduz探测新硬件:service kudzu start ( or restart) 查看CPU信息:cat /proc/cpuinfo 查看板卡信息:cat /proc/pci 查 ...

  2. HDU 5961 传递 【图论+拓扑】 （2016年中国大学生程序设计竞赛（合肥））

    传递 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)     Problem ...

  3. Android开发必知--几种不同对话框的实现

    在开发过程中,与用户交互式免不了会用到对话框以实现更好的用户体验,所以掌握几种对话框的实现方法还是非常有必要的.在看具体实例之前先对AlertDialog做一个简单介绍.AlertDialog是功能最 ...

  4. 传输层之UDP

    1.UDP的定义 跟tcp一样,我们把她定义为: 无连接的,不可靠的,用户数据报协议. 从中我们看到了:无连接和不可靠,这是它的缺点也是它的优点,因为他选择了性能,舍弃了部分安全,节约资源,速度快. ...

  5. linux debug (DOS模拟器，模拟debug）

    最近学习王爽那本<汇编语言>,但其实验均为windows环境,需要用到dos.但最为一个unixer,岂能在windows下开发?所以,要用linux下的工具. 汇编器masm可以用gcc ...

  6. Hdu 4312-Meeting point-2 切比雪夫距离,曼哈顿距离,前缀和

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=4312 Meeting point-2 Time Limit: 2000/1000 MS (Java/Ot ...

  7. WPP

    WPP(Wavefront Parallel Processing) 上一行的第二个LCU处理完毕,即对当前行的第一个LCU的熵编码(CABAC)概率状态参数进行初始化,如图5所示.因此,只需要上一行 ...

  8. 如何实例化i2c_client（四法）

    一.在板文件进行client的实例化 在内核的初始化中(例如在板文件中)定义设备的信息.这种操作的前提是内核编译的时候已经确定有哪些i2c设备和它们的地址,还要知道连接的总线的编号. 比如在板文件/a ...

  9. opencv Installation in Linux and hello world

    http://opencv.org/quickstart.html Installation in Linux These steps have been tested for Ubuntu 10.0 ...

  10. windows下redis的安装配置和php扩展使用phpredis

    1. 首先安装先下载redis数据库     下载地址: http://code.google.com/p/servicestack/wiki/RedisWindowsDownload 目前是2.02 ...