html 1.0 鼠标放上去会亮 onmouseover onmouseout 以及this标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="300px">
     <tr ><td>1</td><td>2</td><td>3</td></tr>
     <tr ><td>1</td><td>2</td><td>3</td></tr>
     <tr ><td>1</td><td>2</td><td>3</td></tr>
</table>
     <script>

           var myTrs = document.getElementsByTagName('tr')
           var len= myTrs.length;
           for (var i=0; i<len; i++){
               myTrs[i].onmouseover = function(){
               this.style.backgroundColor = 'red'
               };
               myTrs[i].onmouseout = function(){
               this.style.backgroundColor = ''
               }
           }

//         function t1(n){
//           var myTrs = document.getElementsByTagName('tr')[n];
//           console.log(myTrs);
//           myTrs.style.backgroundColor = 'red';
//         }
//          function t2(n){
//           var myTrs = document.getElementsByTagName('tr')[n];
//           console.log(myTrs);
//           myTrs.style.backgroundColor = '';
//         }


     </script>

</body>
</html>