我们在遇到表格行数太多时，往往会眼花缭乱，下一行看成对应上一行。就要遇到写鼠标移动那行，那行高亮显示。

这里用到一个this关键字：

　　在面向对象里，this代表对象本身。

　　在这里只要记住，谁调用这个函数，this就指向谁。

DOM 0:

<table id="tr1" border="1" style="width: 300px;">

    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>1</td><td>1</td></tr>

    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>2</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>3</td><td>3</td><td>3</td></tr>

</table>

<script>

    function t1(n) {

        var myTrs = document.getElementsByTagName('tr');

        myTrs[n].style.backgroundColor = "red";

    }

    function t2(n) {

        var myTrs = document.getElementsByTagName('tr');

        myTrs[n].style.backgroundColor = "";

    }

</script>

以上明显缺点，是如果行数太多了，每一行都要加事件，而且没有做到代码js cs 独立。

DOM 1：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <table id="tr1" border="1" style="width: 300px;">

     <tr><td>1</td><td>1</td><td>1</td></tr>

     <tr><td>2</td><td>2</td><td>2</td></tr>

     <tr><td>3</td><td>3</td><td>3</td></tr>

 </table>

 <table id="tr2" border="1" style="width: 300px;">

     <tr><td>1</td><td>1</td><td>1</td></tr>

     <tr><td>2</td><td>2</td><td>2</td></tr>

     <tr><td>3</td><td>3</td><td>3</td></tr>

 </table>

 <script>

     var myTrs = document.getElementById('tr1').children[0].children;

     for(var i=0;i<myTrs.length;i++){

         myTrs[i].onmouseover = function () {

             this.style.backgroundColor = 'red';  //这里的this指代的是调用这个函数的对象myTrs[i].但不能直接写成myTrs[i]，因为在事件没响应时，函数全定义好了，所以执行时，i永远等于2.

         };

         myTrs[i].onmouseout = function () {

             this.style.backgroundColor = "";

         }

     }

 </script>

 </body>

 </html>

前端大神讲解，初级程序与高级程序写表格变色的区别，dom 0 与dom 1的更多相关文章

  1. 为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？

    引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...

  2. 耐克的定制页用canvas如何实现....跪求前端大神指点。

    选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...

  3. 为什么大神的UI设计那么高级？答案尽在此文…

    对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...

  4. web开发菜鸟应该如何向前端大神提问题（一次性把问题描述清楚）

    1. 问题的环境和背景这里的背景一般包括,是针对桌面浏览器还是移动端开发?如果是桌面浏览器,则兼容性要求如何?比方说,你来咨询父级是百分比高度的垂直居中效果,你就要说明,你这个效果是需要兼容IE7+还 ...

  5. 要想成为前端大神，那些你不得不知晓的web前端命名规范。

    一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html ...

  6. WEB前端大神之路之基础篇

    CSS篇: 1.CSS权重: 不重复造轮子啦,直接传送门(CSS选择器的权重与优先规则) JavaScript篇: 1.this关键字: 它是一种引用(referent).指向的是当前上下文(cont ...

  7. 听justjavac大神live前端的入门与进阶小笔记

    代码规范 代码强壮,调试代码 少用变量,多用常量 少用for循环,why循环,多用函数式, 不要直接去使用框架 刷题 提高编程思维 用js去做c语音的问题 阅读别人代码,去看别人的代码 a+b> ...

  8. 酷派大神F2系列使用QPST进行nv备份和恢复，解决无信号问题(附备份文件)

    测试机器: 大神F2联通版 8675_W00 系统COOLUI55     写贴原因: 自己无意间刷错了包,结果手机无信号,进入工程模式怎么设置都没有用.尝试过系统还原(备份过).刷新的ROM.线刷, ...

  9. wire与reg的区别？转载大神！

    本文转自:http://www.cnblogs.com/thymon/archive/2010/06/09/1754541.html //------------------------------- ...

随机推荐

  1. HDU 1808 Halloween treats（抽屉原理）

    题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=1808 Problem Description Every year there is the same ...

  2. 【Python】一些零散的练习

    #练习:subprocess模块来产生子进程 import subprocess obj = subprocess.Popen(["python"], stdin=subproce ...

  3. ES6 Module的语法

    下面比较一下默认输出和正常输出. // 第一组 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; ...

  4. 小技巧, 批处理修改IP

    相信很多人都有这样的麻烦, 工作单位的IP网段与住的不一致, 自己的笔记本在单位和回家的时候每次都要更改IP, 很麻烦,  菜鸟小罗偷个懒, 做了个批处理来修改IP,方便一点. 还有就是可以把工作的时 ...

  5. maven导出项目依赖的jar包

    摘要: 在进行项目部署时,需要将maven项目所依赖的jar导出到指定目录,本文讲解如何导出项目依赖的jar包 一.导出到默认目录 targed/dependency 从Maven项目中导出项目依赖的 ...

  6. exe程序嵌入Winform窗体

    1.新建winform程序,添加一个Panel控件和一个button控件,winform窗体命名为:Mainform: 2.新建一个类文件,方便引用,命名为:exetowinform: 3.Mainf ...

  7. [转]Introduction to Learning to Trade with Reinforcement Learning

    Introduction to Learning to Trade with Reinforcement Learning http://www.wildml.com/2018/02/introduc ...

  8. php 怎样将有范围的ip转化为整型范围

    php中将IP转换成整型的函数ip2long()容易出现问题,在IP比较大的情况下,会变成负数.如下: <?php $ip = "192.168.1.2"; $ip_n = ...

  9. POJ - 1474 ：Video Surveillance （半平面交-求核）

    pro:顺时针给定多边形,问是否可以放一个监控,可以监控到所有地方,即问是否存在多边形的核. 此题如果两点在同一边界上(且没有被隔段),也可以相互看到. sol:求多边形是否有核.先给直线按角度排序, ...

  10. get新技能：上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误

    为什么我上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误 为什么我上传了 flv 或 MP4 文件到服务器,可输入正确地址通过协议来访问总是出现 “无法找到该 ...