Ajout de addEventListener à une cellule de tableau cliquée pour changer la couleur

Je crée une table dynamique de trois colonnes et plusieurs lignes. Je veux être capable de cliquer sur les dernières cellules de chaque rangée et d'avoir la ligne sélectionnée avec une certaine couleur. J'essaie de faire cela et de m'assurer que si une autre cellule est déjà sélectionnée, elle sera désélectionnée. Je rencontre quelques problèmes, je ne sais pas exactement quoi faire. Je peux créer un message d'alerte onclick qui fonctionne, mais pas de succès avec la couleur bg. Toutes les suggestions sont utiles. La fonction createCell devrait être là où cela est adressé.Ajout de addEventListener à une cellule de tableau cliquée pour changer la couleur

<html> 
<br/><br/></p> 
<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<td>Name</td> 
<td>Age</td> 
<td>Sex</td> 
</tr> 

</table> 
<p></center></p> 
<script type="text/javascript" language="javascript"> 

function appendRow(){ 


var names = ["Paul", "Mike", "Linda"]; 
var ages = ["16", "23", "44"]; 
var male_female = ["M", "M", "F"]; 
var tbl = document.getElementById('my_table'); // table reference 
// append table row 
var id; 
var z=1; 
for(k=0;k<names.length;k++){  
var row = tbl.insertRow(tbl.rows.length); 


    var j = tbl.rows.length - 2; 
    for (var i=0;i<tbl.rows[0].cells.length;i++) { 
     id=z++; 
      var cell_text = ''; 
      if (i == 0) { 
       cell_text = names[j]; 
      } else if (i == 1) { 
       cell_text = ages[j]; 
      } else if (i == 2) { 
       cell_text = male_female[j]; 
      } 
     createCell(id, row.insertCell(i), cell_text, 'row'); 

    } 


    } 


} 

function createCell(id, cell, text, style){ 

var div = document.createElement('div'); // create DIV element 

var txt = document.createTextNode(text); // create text node 
if(id % 3 == 0) 
{ 
      cell.setAttribute('onclick', 'alert("hello")'); //for testing purposes 
     cell.addEventListener("click", clickCell, false); 
} 
div.appendChild(txt);     // append text node to the DIV 
div.setAttribute('class', style);  // set DIV class attribute 
div.setAttribute('className', style); // set DIV class attribute for IE (?!) 
cell.appendChild(div);   // append DIV to the table cell 
} 

    function clickCell() 
{ 
if(e) 
    e.setAttribute("bgColor","purple"); 

if(e != this){ 
    e = this; 
    e.setAttribute("bgColor","blue"); 
}else{ 
    e = null; 
    } 
}  





</script> 
<BODY onload="appendRow()"> 

<style> 
table#my_table{border-collapse:collapse;} 
table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font-size:10pt;text-align:center;padding:0;} 
    .append_row{background-color:#FFD6D6;border:1px #ccc solid;} 
</style> 
</body> 
</html>

Source

2010-09-18 cameron213

Qu'est-ce que 'e' dans' clickCell'? Je ne peux pas le trouver déclaré nulle part. 'this' dans la fonction se référera à l'élément' window'. 'addEventListener' n'existe pas dans IE btw (afaik). –

La vérité est que je ne sais pas exactement ce que je fais. Je n'ai trouvé aucune référence à ce genre d'appel, alors j'ai juste jeté quelques trucs là-dedans. – cameron213

Modifier la méthode clickCell à:

function clickCell(e) { 
    // clear the background of all rows 
    var rows = document.getElementById('my_table').rows; 
    for(var i = 0; i < rows.length; i++) { 
     rows[i].style.backgroundColor = ''; 
    } 
    // set background of clicked row 
    this.style.backgroundColor = 'purple'; 
}

Voir un example.

Source

2010-09-18 06:59:38 Anurag

Comment changer la couleur d'arrière-plan sur la seule cellule cliquée? Merci pour l'aide – cameron213

'this' se réfère à l'élément' 'dans cette fonction. N'appelez pas 'this.parentNode' qui obtiendra l'élément' ', et faites simplement' this.style.backgroundColor = 'purple''. Réponse mise à jour – Anurag

Je vois que si vous définissez this.parentNode.style.backgroundColor = 'purple'; à ce style ..... cela ne change que la couleur de fond de la cellule. merci encore – cameron213

En createCell changement cell.setAttribute('onclick', 'alert("hello")');-cell.setAttribute('onclick', 'alert("hello");this.parentNode.setAttribute("bgcolor", "purple")');

Source

2010-09-18 06:52:02

Cela fonctionne, cependant, il change la couleur de la 3e rangée en violet. Je veux seulement que la cellule cliquée change de couleur. This.parentNode.parentNode.setAttritube colorera la table entière. – cameron213

puis utilisez this.setAttribute et j'ai utilisé seulement this.parentNode en pensant que vous vouliez changer la couleur de la ligne entière. cela fait référence à currentcell puisque c'est l'élément sur lequel l'événement onclick est enregistré. –

A compris que si je règle la fonction clickcell sur ce qui suit, toutes les cellules colorées seront effacées. Je pensais que je pourrais appeler "this.style.backgroundColor" pour changer la couleur de la cellule, puis effacer cette cellule avec un "row.style.backgroundColor" s'avère que j'avais tort.

function clickCell(e) { 
var tr = document.getElementById('my_table').rows; 

for(i=0;i<tr.length;i++) 
{ 
    for(k=0;k<tr[i].cells.length;k++) 
    { 
     tr[i].cells[k].style.backgroundColor = ""; 
    } 
} 
this.style.backgroundColor = "blue"; 
}

Source

2010-09-18 18:07:56 cameron213

Ajout de addEventListener à une cellule de tableau cliquée pour changer la couleur

Répondre

Questions connexes