博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

这里用到一个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>
View Code