Question

我已经使用Javascript创建了一个动态表。现在我想要做的是动态生成的每个单元格，有一个onmouseover事件可以改变特定单元格的backgroundColor。

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

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

＆＃13;

<!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>

＆＃13;

任何建议都将不胜感激。

Answer 1

我实际上找到了答案，我自己也在使用我的代码。

在行中：

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

我把它改为：

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

Answer 2

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

不要使用javascript编辑内联样式。而是添加或删除一个类。见＃3。
不要在你的＆＃34; onload＆＃34;，＆＃34; onmouseover＆＃34;中做很多事件处理程序。最好添加一个事件监听器。
一次添加所有新元素而不是单独添加新元素会有更好的性能。请参阅此文章：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动态表，每个单元格都有一个onmouse事件？

2 个答案: