前端大神讲解，初级程序与高级程序写表格变色的区别，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 //------------------------------- ...
随机推荐
- Python网络爬虫第二弹《http和https协议》
一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...
- JsonWebToken
概述 如果各位不了解 JWT,不要紧张,它并不可怕. JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 让我们来假想一下一个 ...
- Django框架的使用
1.创建项目: 语法:django-admin startproject 项目名称 2.Django的项目结构介绍 1.manage.py 功能:包含执行django中的各项操作的指令,不太清楚可以使 ...
- Error Downloading Packages: yum更新出现错误
yum install lrzsz 失败报错: 解决思路: 1:执行yum clean all 清除缓存目录下的软件包及旧的headers: 2:接着执行 yum list 重新列出所有已经安装和可 ...
- seo：网站被黑的预防及处理方法
一.网站被黑的类型有哪些 1.网站挂木马 :通过网站后台 FTP等植入恶意代码 2.网站域名被恶意泛解析 3.跳转 4.百度快照劫持:黑客劫持快照在你不工作的时候进入你的网站的,一般是凌晨1点到5. ...
- JAVA:形参与实参
今天百度startWith函数的用法,无意中看到了形参这个称呼,因此就去了解了下形参与实参. 在传值机制中,其实就是把变量b(实参)的地址传递给了形参(也就是实参跟形参都是用的同一个地址,在传值之前形 ...
- 20155208徐子涵 2016-2017-2 《Java程序设计》第3周学习总结
20155208徐子涵 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 4.1 类与对象 •对象(Object):存在的具体实体,具有明确的 ...
- 03 事务，连接池DBCP，C3P0，DBUtils
事务 Transaction 其实指的一组操作,里面包含许多个单一的逻辑.只要有一个逻辑没有执行成功,那么都算失败. 所有的数据都回归到最初的状态(回滚) 事务的作用:为了确保逻辑的成功. 例子: ...
- python------模块定义、导入、优化 ------->xml模块
1. xml模块 引用参考原文链接:https://www.cnblogs.com/python-gm/p/8032465.html 谢谢 xml是实现不同语言或程序之间进行数据交换的协议, ...
- static关键字的使用（有个深刻领悟）
没有实例化对象的时候进行可以调用static 属性 static方法 (用类名去调用) 非static定义的方法可以调用static的属性或方法. static定义的方法不能调用非static的方法 ...