Javascript Table dynamique avec chaque cellule ayant un événement onmouse?

J'ai créé une table dynamique en utilisant Javascript. Maintenant, ce que j'essaye de faire est pour chaque cellule qui est générée dynamiquement, il y a un événement onmouseover qui changerait la backgroundColor de cette cellule particulière. Le problème que j'ai est que quand je génère la table et essaie d'avoir une fonction onmouseover avec chaque cellule générée dynamiquement la fonction ne fonctionne que pour la dernière cellule générée.Javascript Table dynamique avec chaque cellule ayant un événement onmouse?

Voici une copie de mon code. (Note: Je n'ai testé sur Chrome)

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

Tout conseil serait grandement apprécié.

Source

2015-03-28 primetimeCanuck

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example –

Votre problème est que 'cell' se rapporte toujours la dernière cellule. C'est un problème général de "fermeture". –

Quelques améliorations. 3 choses que je voudrais changer:

Ne modifiez pas les styles en ligne avec javascript. Au lieu de cela, ajoutez ou supprimez une classe. voir # 3.
Ne pas faire autant de gestionnaires d'événements dans votre "onload", "onmouseover". Il est préférable d'ajouter un écouteur d'événement.
Il est préférable d'ajouter tous les nouveaux éléments en même temps plutôt que individuellement. Voir cet article: https://developers.google.com/speed/articles/reflow

est ici un moyen d'optimiser le 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

Source

2015-03-28 04:46:55

Merci scavaJripter! Je vais essayer de cette façon. Je suis en train d'apprendre le html, le css et le javascript, donc je ne suis pas encore très versé. – primetimeCanuck

continuez comme ça ... Essayez simplement d'obtenir des connaissances javascript de MDN et non de w3schools –

J'ai trouvé la réponse moi-même en jouant avec mon code.

Dans la ligne:

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

je l'ai changé:

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

Source

2015-03-28 04:15:52 primetimeCanuck

Javascript Table dynamique avec chaque cellule ayant un événement onmouse?

Répondre

Questions connexes