点击表格行变色，这种网页效果应该还是比较常见的。
大家应该看见了，我这里的效果是用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. c#生成注册码的两种方法(mac地址与IP地址)

    using System; using System.Management; using System.Security.Cryptography; using System.IO; using Sy ...

  2. linux kernel API and google android compile guide

    (1)linux kernel API website: http://docs.knobbits.org/local/linux-doc/html/regulator/index.html http ...

  3. 【Android 复习】：Android之ViewFlipper（一）

    屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面. 通过查看Android API文档可以发现, ...

  4. 动态规划（DP计数）：HDU 5117 Fluorescent

    Matt, a famous adventurer who once defeated a pack of dire wolves alone, found a lost court. Matt fi ...

  5. 排序 O(nlogn)

    1. 堆排序是一种优秀的排序算法,时间复杂度O(nlogn),主要思想是用数组构造一个最大堆,满足跟节点的value>子节点的value,然后将堆顶元素(value最大)与最后一个叶子节点交换, ...

  6. [comparator] 策略模式

    我们知道策略模式,首先是各种策略可以替换,其实我们常见的Arrays.sort();中可以指定比较器,实现comparator接口的比较器,作为对象传入,这不就是策略模式吗,好理解吧

  7. oracle查看表锁及解锁

    --kill session语句 1 alter system kill SESSION '2171,60490'; --以下几个为相关表 1 2 3 4 5 6 7 SELECT * FROM v$ ...

  8. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  9. java利用反射调用类的某个方法

    java利用反射机制 可以动态调用某个类的某个方法,在 扩展系统功能或提供对外接口时经常用的到. 代码如下: 打印类Print.java package com.test.reflct; /** * ...

  10. CoreJava_线程并发（堵塞队列）：在某个目录下搜索含有某keyword的文件

    Java多线程编程是很考验一个程序猿水平的. 传统的WEB程序中.由于框架提供了太多的健壮性.并发性.可靠性的支持,所以我们都是将全部的注意力放到了业务实现上.我们不过依照业务逻辑的要求.不停的积累自 ...