我们在遇到表格行数太多时，往往会眼花缭乱，下一行看成对应上一行。就要遇到写鼠标移动那行，那行高亮显示。
这里用到一个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：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <table id="tr1" border="1" style="width: 300px;"> 10 <tr><td>1</td><td>1</td><td>1</td></tr> 11 <tr><td>2</td><td>2</td><td>2</td></tr> 12 <tr><td>3</td><td>3</td><td>3</td></tr> 13 </table> 14 <table id="tr2" border="1" style="width: 300px;"> 15 <tr><td>1</td><td>1</td><td>1</td></tr> 16 <tr><td>2</td><td>2</td><td>2</td></tr> 17 <tr><td>3</td><td>3</td><td>3</td></tr> 18 </table> 19 <script> 20 var myTrs = document.getElementById('tr1').children[0].children; 21 for(var i=0;i<myTrs.length;i++){ 22 myTrs[i].onmouseover = function () { 23 this.style.backgroundColor = 'red'; //这里的this指代的是调用这个函数的对象myTrs[i].但不能直接写成myTrs[i]，因为在事件没响应时，函数全定义好了，所以执行时，i永远等于2. 24 }; 25 myTrs[i].onmouseout = function () { 26 this.style.backgroundColor = ""; 27 } 28 } 29 </script> 30 </body> 31 </html>
