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

    还是仙人掌,和1023一样的考虑方法比1023简单但比1040难环形dp的处理方法和1040一样 type node=record po,next:longint; end; ..,..] of lo ...

  2. JavaScript用JQuery呼叫Server端方法

    准备好Server端的方法 [System.Web.Services.WebMethod] public static string VeryUserName(string name) { strin ...

  3. ASP.NET中验证控件的使用

    转自:http://www.cnblogs.com/yangmingming/archive/2010/03/09/1682006.html 前言: 前几日,无奈用JS判断控件的有效性,发现的确是一件 ...

  4. HDU 5935 Car 【模拟】 （2016年中国大学生程序设计竞赛（杭州））

    Car Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  5. [PeterDLax著泛函分析习题参考解答]第7章 Hilbert 空间结果的应用

    1. 对测度是 $\sigma$ 有限的情形证明 Radon-Nikodym 定理. 证明: 设 $\mu,\nu$ 均为 $\sigma$ 有限的非负测度, 则存在分割 $$\bex X=\cup_ ...

  6. Parallels Desktop 7用bootcamp安装win7 后如何激活WIN7

    在parallels的选项中,在硬件选项卡的引导标记中添加:kernel.waet.enable=0 ,重新启动win7即可激活.

  7. NTP DDOS攻击

    客户端系统会ping到NTP服务器来发起时间请求更换,同步通常每隔10分钟发生: 从NTP服务器发回到客户端的数据包可能比初始请求大几百倍.相比之下,通常用于放大攻击中的DNS响应被限制仅为8倍的带宽 ...

  8. Area - POJ 1654（求多边形面积）

    题目大意:从原点开始,1-4分别代表,向右下走,向右走,向右上走,向下走,5代表回到原点,6-9代表,向上走,向左下走,向左走,向左上走.求出最后的多边形面积. 分析:这个多边形面积很明显是不规则的, ...

  9. MongoDB 复制集(二) 选举 自动故障切换

    一   复制集的高可用性简介       复制集通过故障自动切换来实现高可用性,当主节点出现故障的时候,从节点可以通过选举成为主节点,而这个过程在大多数当情况下是自动进行的,不需要手动干预.在某些情况 ...

  10. 对tomcat来说，每一个进来的请求(request)都需要一个线程，直到该请求结束。

    这段时间折腾了哈java web应用的压力测试,部署容器是tomcat 7.期间学到了蛮多散碎的知识点,及时梳理总结,构建良好且易理解的知识架构把它们组织起来,以备忘.对web应用开发者来说,我们很关 ...