Javascript 动态 Table 每个单元格都有一个 onmouse 事件？

Question

我使用 Javascript 创建了动态 table。现在我要做的是为每个动态生成的单元格，有一个 onmouseover 事件会改变那个特定单元格的背景颜色。

我遇到的问题是，当我生成 table 并尝试对每个动态生成的单元格使用 onmouseover 函数时，该函数仅适用于最后生成的单元格。

这是我的代码的副本。（注意：我只在 Chrome 上测试过）

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  text-align: center;
 }
</style>
<script type="text/javascript">
 var table;
 
 function init(){
  table = document.getElementById("mytable");
 }
 
 function makeCells(){
  init();
    
  for(var a=0;a<20;a++){
   var row = table.insertRow(-1);
   
   for(var b=0;b<20;b++){
    cell = row.insertCell(-1);
    cell.innerHTML = a*b;
    cell.onmouseover = function(){cell.style.backgroundColor = "yellow";};
   }
  }
 }
</script>
</head>
<body onload="javascript: makeCells();">
 <table id="mytable"></table>
</body>
</html>

如有任何建议，我们将不胜感激。

Answer 1

实际上我自己通过自己的代码找到了答案。

行中：

cell.onmouseover = function(){cell.style.backgroundColor = "yellow";};

我改成了：

cell.onmouseover = function(){this.style.backgroundColor = "yellow";};

Answer 2

一些改进。我会改变的 3 件事：

不要使用 javascript 编辑内联样式。相反，添加或删除 class。参见 # 3.
不要在您的 "onload"、"onmouseover" 中执行太多事件处理程序。最好加个事件监听器
一次添加所有新元素比单独添加新元素性能更好。看这篇文章：https://developers.google.com/speed/articles/reflow

这里有一个优化方法 Javascript:

HTML

<table id="table"></table>

CSS

body {
  padding: 40px;
}
.yellow {
  background: yellow;
}
td {
    padding: 10px 20px;
    outline: 1px solid black;
}

JavaScript

    function propegateTable() {
      var table = document.getElementById("table");

      //will append rows to this fragment
      var fragment = document.createDocumentFragment();

      for(var a=0; a<10; a++){ //rows
          //will append cells to this row
          var row = document.createElement("tr");

          for(var b=0;b<5;b++){ //collumns
            var cell = document.createElement("td");
            cell.textContent = a + ", " + b;
            // event listener
            cell.addEventListener("mouseover", turnYellow);
            row.appendChild(cell);
          }

          fragment.appendChild(row);
        }
      //everything added to table at one time
      table.appendChild(fragment);
    }

    function turnYellow(){
      this.classList.add("yellow");
    }

    propegateTable();

http://codepen.io/ScavaJripter/pen/c3f2484c0268856d3c371c757535d1c3

Javascript 动态 Table 每个单元格都有一个 onmouse 事件？

Javascript Dynamic Table with each cell having an onmouse event?

javascript

dom

google-chrome

onmouseover