前端大神讲解，初级程序与高级程序写表格变色的区别，dom 0 与dom 1
我们在遇到表格行数太多时，往往会眼花缭乱，下一行看成对应上一行。就要遇到写鼠标移动那行，那行高亮显示。
这里用到一个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的更多相关文章
- 为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？
引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...
- 耐克的定制页用canvas如何实现....跪求前端大神指点。
选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...
- 为什么大神的UI设计那么高级？答案尽在此文…
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...
- web开发菜鸟应该如何向前端大神提问题（一次性把问题描述清楚）
1. 问题的环境和背景这里的背景一般包括,是针对桌面浏览器还是移动端开发?如果是桌面浏览器,则兼容性要求如何?比方说,你来咨询父级是百分比高度的垂直居中效果,你就要说明,你这个效果是需要兼容IE7+还 ...
- 要想成为前端大神，那些你不得不知晓的web前端命名规范。
一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html ...
- WEB前端大神之路之基础篇
CSS篇: 1.CSS权重: 不重复造轮子啦,直接传送门(CSS选择器的权重与优先规则) JavaScript篇: 1.this关键字: 它是一种引用(referent).指向的是当前上下文(cont ...
- 听justjavac大神live前端的入门与进阶小笔记
代码规范 代码强壮,调试代码 少用变量,多用常量 少用for循环,why循环,多用函数式, 不要直接去使用框架 刷题 提高编程思维 用js去做c语音的问题 阅读别人代码,去看别人的代码 a+b> ...
- 酷派大神F2系列使用QPST进行nv备份和恢复，解决无信号问题(附备份文件)
测试机器: 大神F2联通版 8675_W00 系统COOLUI55 写贴原因: 自己无意间刷错了包,结果手机无信号,进入工程模式怎么设置都没有用.尝试过系统还原(备份过).刷新的ROM.线刷, ...
- wire与reg的区别？转载大神！
本文转自:http://www.cnblogs.com/thymon/archive/2010/06/09/1754541.html //------------------------------- ...
随机推荐
- SpringMvc使用FastJson做为json的转换器（注解方式）
在使用XML方式配置项目,使用fastjson做为Json转换器时通常的在XML内添加如下的配置: <mvc:message-converters register-defaults=" ...
- 排序jq
var arr = [1,2,3,4,5,6,7]; arr.sort(function (a, b) { 从大到小 if (a > b) { return 1; } else if (a &l ...
- HDU 1846 Brave Game（巴什博弈超简单题）
题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=1846 Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片, ...
- python3：利用SMTP协议发送QQ邮件+附件
转载请表明出处:https://www.cnblogs.com/shapeL/p/9115887.html 1.发送QQ邮件,首先必须知道QQ邮箱的SMTP服务器 http://service.mai ...
- js的调用方式
1.元素绑定 给具体的元素绑定JS的事件 事件:由用户行为触发的操作(鼠标操作,键盘操作) 语法:<标签 事件函数名="JS代码"> et: onclick:单机事件 ...
- 使用NATS替换NSQ为后台服务解耦
简介 满世界的后台都在向微服务架构发展,我对微服务的理解是将一个复杂的业务分拆为多个服务,由多个服务协作完成一个服务:在后台微服务架构时需要考虑高可用.一致性等问题,也要考虑在实现上.编码上的复杂程度 ...
- Gym 102091A： Flying Squirrel（RMQ）
题意:如图,有N个柱子,每次我可以从高柱子X到低柱子Y,而且需要满足中间的柱子都小于X的高度. 思路:现在有Q次询问,每次给定(X,Y),(如果ht[X]<ht[Y],则交换XY),问X为起点, ...
- get新技能：上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误
为什么我上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误 为什么我上传了 flv 或 MP4 文件到服务器,可输入正确地址通过协议来访问总是出现 “无法找到该 ...
- 更换JDK版本时的问题：Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg'
1.先把oracle自带的weblogic给卸载了,然后打开eclipse,发现报错了:Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg' J ...
- NET Core MVC中创建PDF
使用Rotativa在ASP.NET Core MVC中创建PDF 在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP ...