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

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

这里用到一个this关键字：

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

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

DOM 0:

<table id="tr1" border="1" style=" 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=" 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=" 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>

View Code