0

内部のタグにclickイベントを設定しようとしています<a>TD

私は持っています

test.prototype.buildData = function() {
 cell = createElement('td', {innerHTML: "<a class='link' onclick='"+this.edit(this)+"'>"+ value + "</a>"});
 this.table.appendChild(cell);

 //many cells..all need to attached the click event

}

test.prototype.edit=function(this){
  this.style.backgroundColor='red'  
}

クリックしたを変更したいcell background color。clickまた、イベントのみを<a>タグに登録する必要があります。私this.edit(this)は意味がないことを知っています。

とにかくこれを行うことはありますか？どうもありがとう！

4

2 に答える 2

1

<a>作成時に-sにIDを自動的に割り当てることができます

var newCellId = 0;
test.prototype.buildData = function() {
  cell = createElement('td',
   {innerHTML: "<a class='link' id='dynamicCellId_"+String(newCellId)+"'"+     value + "</a>"});
  this.table.appendChild(cell);
  newCellId +=1;
}

次に、を使用してそれらすべてをトレースできますdocument.getElementById('dynamicCellId_X')

于 2013-01-04T20:40:24.533 に答える
1

これらの線に沿って何かを試してください...

test.prototype.buildData = function (value) {
    var cell = document.createElement("td"),
        anchor = document.createElement("a");

    anchor.className = "link";
    anchor.addEventListener("click", (function (self) {
        return function () {
            self.edit(this);
        };
    })(this), false);
    anchor.innerHTML = value;

    cell.appendChild(anchor);

    this.table.appendChild(cell);
};

test.prototype.edit = function (el) {
    el.style.backgroundColor = "red";
};

ノート：

  1. メソッドを介して関数をイベントハンドラーとして割り当てる場合、関数内のaddEventListenerの値は、イベントをトリガーしたDOM要素です。this
  2. の2番目の引数addEventListenerは、JavaScriptの他のすべてのような単純なオブジェクトである関数です。したがって、実際のイベント処理コードを含む関数を返す即時呼び出し関数式を使用できます。
  3. thisJavaScriptを初めて使用する場合、の値は注意が必要です。メソッドの「クリック」引数の直後の括弧内に定義されている関数である私のIIFEを見ると、最後（引数の直前）の引数としてaddEventListener渡されていることがわかります。ここで私がしているのは、に等しいメソッドの観点からの値を渡すことです。ただし、 IIFEはそれを引数と見なしているため、返された関数では、引数を使用しての（つまり）メソッドを呼び出します。この場合、このメソッドはイベントをトリガーした要素です。thisfalsethisbuildDatatest.prototypeselfselftest.prototypeeditthis
  4. test.prototype.edit要素を単一の引数として取り、背景色を変更します。
于 2013-01-04T20:44:36.920 に答える