大家帮忙看下这段代码，不清楚哪的问题...

Question

<script>
    
    
    function mouseOver(layerElment,x,y){
        locateDiv(layerElment,x,y);
        displayDiv(layerElment,"block")
    }
    
    function locateDiv(layerElment,x,y){
        layerElment.style.left = x;
        layerElment.style.top = y-100;
    }
    
    function displayDiv(layerElment,isDisplay){
        //alert(isDisplay);
        layerElment.style.display = isDisplay
    }
    
    function setTextContent(layerElment,textContent){
        layerElment.innerHTML = textContent;
    }
    
    function myOnmouseover(tableID){
        var table = document.getElementById(tableID);
        var rows = table.rows;    
     //主要是这个方法
     for (i = 0; i < rows.length; i++) {
        var theadCells = rows[i].cells;
        var cell = theadCells[0]; 
var cell2 =theadCells[7];
        var contractBWLayer = document.getElementById("Layer1");        cell.onmouseover = function ()
        {
     if(this.innerHTML == "222")
 {
 cell2.onmouseover = function ()
 {
 mouseOver(contractBWLayer,event.screenX,event.screenY);
 setTextContent(contractBWLayer,"hello1");
 
 }
         }   
 if(this.innerHTML == "333")
 {
 cell2.onmouseover = function ()
 {
 mouseOver(contractBWLayer,event.screenX,event.screenY);
 setTextContent(contractBWLayer,"hello2");
 
 }
         }   
  cell2.onmouseout = function()
  {
                displayDiv(contractBWLayer,"none");
  }
        } 
      }             
    }
</script><style type="text/css">
        <!--
        #Layer1 {
        
        position:absolute;
        left:0;
        top:0;
        width:100px;
        height:80px;        
        z-index:1;
        background-color: yellow;    
        display:none    
        }
        -->
</style><div >
    <table class="table" id="statNodeAllList">
                <tr>
                    <td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
                </tr>
                
                <tr>
                     <td >333</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
                </tr>
 <tr>
                     <td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
<td >222</td>
                    <td >333</td>
                </tr>
</table>
</div><div id="Layer1"></div><script type="text/javascript">
        myOnmouseover("statNodeAllList");
</script>
我要的效果是当第一列为“222”时，第7列提示“hello1”
我要的效果是当第一列为“333”时，第7列提示“hello2”
但是这段代码只是最后一行显示，
进页面后，得等一会鼠标放上去才提示，望各位牛人给解答一下谢谢大家，

Answer 1

window.onload=function(){
        var table=document.getElementById('statNodeAllList'),rows=table.rows,rowLen=rows.length,row;
        while(rowLen-->0){
            row=rows[rowLen];
            if(row.cells[0].innerHTML="222")
                row.cells[6].innerHTML="hello1";
            if(row.cells[0].innerHTML="333")
                row.cells[6].innerHTML="hello2";
        }
    };

Answer 2

var cell = theadCells[0]; 
var cell2 =theadCells[7];看看这句，值被最后一个td覆盖了cell.onmouseover = function {
if(this.innerHTML == "222")
{
   cell2.onmouseover = function ()触发完第一个td，最后一个td才能触发。

Answer 3

var cell = theadCells[0]; 
var cell2 =theadCells[7];看看这句，值被最后一个td覆盖了cell.onmouseover = function {
if(this.innerHTML == "222")
{
   cell2.onmouseover = function ()触发完第一个td，最后一个td才能触发。

Answer 4

<script>
    
    
    function mouseOver(layerElment,x,y){
        locateDiv(layerElment,x,y);
        displayDiv(layerElment,"block")
    }
    
    function locateDiv(layerElment,x,y){
        layerElment.style.left = x;
        layerElment.style.top = y-100;
    }
    
    function displayDiv(layerElment,isDisplay){
        //alert(isDisplay);
        layerElment.style.display = isDisplay
    }
    
    function setTextContent(layerElment,textContent){
        layerElment.innerHTML = textContent;
    }
    
    function myOnmouseover(tableID){
        var table = document.getElementById(tableID);
        var rows = table.rows;    
        //主要是这个方法
     for (i = 0; i < rows.length; i++) {
        
        var contractBWLayer = document.getElementById("Layer1");
        var theadCells = rows[i].cells;
        var cell = theadCells[0];         cell.onmouseover = (function (n)
        {
         return function(){
            
            var cell2 =rows[n].cells[7];//使每次调用的都是当前的row
             if(this.innerHTML == "222")
             {
                 cell2.onmouseover = function ()
                 {
                    var evt = window.event || arguments[0];
                     mouseOver(contractBWLayer,event.screenX,event.screenY);
                    setTextContent(contractBWLayer,"hello1");
                 
                 }
             }   
             if(this.innerHTML == "333")
             {
                 cell2.onmouseover = function ()
                 {
                  var evt = window.event || arguments[0];
                     mouseOver(contractBWLayer,evt.screenX,evt.screenY);
                 setTextContent(contractBWLayer,"hello2");
                 
                 }
             }   
              cell2.onmouseout = function()
              {
                displayDiv(contractBWLayer,"none");
              }
            }
        })(i)     
      }             
    }
</script><style type="text/css">
        <!--
        #Layer1 {
        
        position:absolute;
        left:0;
        top:0;
        width:100px;
        height:80px;        
        z-index:1;
        background-color: yellow;    
        display:none    
        }
        -->
</style><div >
    <table class="table" id="statNodeAllList">
                <tr>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                </tr>
                
                <tr>
                     <td >333</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                </tr>
                 <tr>
                     <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                    <td >222</td>
                    <td >333</td>
                </tr>
                </table>
</div><div id="Layer1"></div><script type="text/javascript">
        myOnmouseover("statNodeAllList");
</script>你在onmouseover事件触发时当前的cell已经是最后一行的最后一列了，这里需要用到闭包，红色字体处

Answer 5

请加上闭包~你之前的方法cell与cell2每次都是最后一个了cell.onmouseover = function (cell, cell2)
        {
         return function(){
         if(this.innerHTML == "222")
             {
             
                 cell2.onmouseover = function ()
                 {
                     mouseOver(contractBWLayer,event.screenX,event.screenY);
                  setTextContent(contractBWLayer,"hello1");
                 
                 }
             }   
             if(this.innerHTML == "333")
             {
                 cell2.onmouseover = function ()
                 {
                     mouseOver(contractBWLayer,event.screenX,event.screenY);
                  setTextContent(contractBWLayer,"hello2");
                 
                 }
             }   
              cell2.onmouseout = function()
              {
                displayDiv(contractBWLayer,"none");
              }
         }
             
        }(cell, cell2) 

Answer 6

function myOnmouseover(tableID){
        var table = document.getElementById(tableID);
        var rows = table.rows;           var contractBWLayer = document.getElementById("Layer1");
    //主要是这个方法
     for (i = 0; i < rows.length; i++) {
        var theadCells = rows[i].cells;
        var cell = theadCells[0]; 
        var cell2 =theadCells[6];             if(cell.innerHTML == "222")
             {
                 cell2.onmouseover = function ()
                 {
                     mouseOver(contractBWLayer,event.screenX,event.screenY);
                 setTextContent(contractBWLayer,"hello1");
                 
                 }
             }   
             if(cell.innerHTML == "333")
             {
                 cell2.onmouseover = function ()
                 {
                     mouseOver(contractBWLayer,event.screenX,event.screenY);
                 setTextContent(contractBWLayer,"hello2");
                 
                 }
             }   
              cell2.onmouseout = function()
              {
                displayDiv(contractBWLayer,"none");
              }    
      }             
    }