Hinzufügen addEventListener einer angeklickten Zelle in der Tabelle um die Farbe zu ändern

Ich bin erstellen einer dynamischen Tabelle mit drei Spalten und mehreren Zeilen. Ich möchte in der Lage sein, um Sie auf die letzten Zellen in jeder Zeile und die Zeile ausgewählt werden, die zeigen eine bestimmte Farbe. Ich versuche, das so gut wie sicher, dass, wenn eine andere Zelle ausgewählt ist, bereits wird es wieder abwählen. Ich habe ein paar Fragen, die nicht genau wissen, was zu tun ist. Ich kann erstellen eine onclick-alert-Nachricht, die funktioniert, aber keinen Erfolg mit der Hg Farbe. Anregungen sind hilfreich. Funktion createCell sollten, wo dies gerichtet ist.

<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>
Was ist e im clickCell? Ich kann es nicht finden, erklärte überall. this in der Funktion beziehen sich auf den window element. addEventListener existiert nicht im IE übrigens (afaik).
Die Wahrheit ist, ich weiß nicht genau, was ich Tue. Konnte nicht finden jede Bezugnahme auf diese Art von anrufen, so dass ich nur warf einige Sachen drin.

InformationsquelleAutor cameron213 | 2010-09-18

  1. 4

    Ändern Sie die clickCell Methode:

    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';
}

    Finden Sie eine Beispiel.

    Wie ändern Sie die Hintergrundfarbe nur auf die angeklickte Zelle? Danke für die Hilfe
    this bezieht sich auf die <td> element in dieser Funktion. Rufen Sie nicht this.parentNode das erhalten der <tr> element, und tun Sie einfach this.style.backgroundColor = 'purple'. Aktualisierte Antwort.
    Ich sehe, dass wenn Sie diese.parentNode.Stil.backgroundColor = 'lila';.Stil.....es tut nur ändern sich die Hintergrundfarbe der Zelle. nochmals vielen Dank
    So weit wie das entfernen der Hintergrundfarbe für die Zelle, wie handhabst du das? Ich habe versucht, fast alles, was ich mir denken kann. Versucht, mit einer Schleife, wie ich zum Auffüllen der Elemente der Tabelle.
    Siehe das verlinkte Beispiel. Es entfernt die Hintergrundfarbe von ganzen Zeilen.

    InformationsquelleAutor Anurag

  2. 2

    In createCell ändern cell.setAttribute('onclick', 'alert("hello")'); zu cell.setAttribute('onclick', 'alert("hello");this.parentNode.setAttribute("bgcolor", "purple")');

    Das funktioniert, jedoch ändert es die Farbe der 3. Reihe lila. Ich will nur die angeklickte Zelle die Farbe ändern. Diese.parentNode.parentNode.setAttritube die Farbe der gesamten Tabelle.
    dann verwenden Sie diese.setAttribute, und auch ich habe nur dieses.parentNode denken, Sie wollte zu ändern-Farbe der gesamten Zeile. dies bezieht sich auf currentcell denn das ist das element, auf dem das onclick-Ereignis registriert ist

    InformationsquelleAutor Vinay B R

  3. 0

    Herausgefunden, dass wenn ich die clickcell-Funktion, um die folgenden, wird es deaktivieren Sie alle Zellen, die gefärbt sind. Ich dachte, ich nennen könnte".Stil.backgroundColor", um die Zelle Farbe und dann ist klar, dass die Zelle mit "Zeile.Stil.backgroundColor" stellt sich heraus, ich war falsch. 

    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";
}

    InformationsquelleAutor cameron213

Schreibe einen Kommentar