1

テーブル行の onClick イベントを削除するにはどうすればよいですか?

    var count = 0,
        optionsTable     = new HtmlTable({
                properties: {id: 'optionstable', border: 0, cellspacing: 0, width: "100%"},
                headers: ['Name', 'Value', 'Price', 'Action']                               
            }).inject(container);

        optionsTable.push(['<input type="text" name="option[0][name]" class="w70">',
                   '<input type="text" name="option[0][value]" class="w50">',
                   '<input type="text" name="option[0][price]" class="w50">',
                   '<a href="javascript:void(0);" class="add_option">Add</a>'
                 ]);

        $$('.add_option').addEvent('click', function(){
            count ++;
            optionsTable.push(['<input type="text" name="option['+count+'][name]" class="w70">',
               '<input type="text" name="option['+count+'][value]" class="w50">',
               '<input type="text" name="option['+count+'][price]" class="w50">',
               '<a href="javascript:void(0);" class="product_remove_option">Remove</a>'
           ]);
        });

        $$('.product_remove_option').addEvent('click', function(){
            /*What should be here to remove selected table row?*/                        
        });
4

2 に答える 2

1

これはあなたが望むことをするはずです:

$('optionstable').getElements('tr').addEvent('click',function(){
  this.destroy();
});
于 2013-05-15T08:32:44.743 に答える
1

まず第一に、新しく作成された要素に常にイベントを追加する (またはイベント委任を使用する) ようにする必要があります。

あなたの質問に答えるには:HtmlTable.pushメソッドは、追加された表の行と表のセルを含むオブジェクトを返します。テーブル行を呼び出すだけdestroyで削除できます。

コードは次のようになります。

var count = 0,
    optionsTable     = new HtmlTable({
            properties: {id: 'optionstable', border: 0, cellspacing: 0, width: "100%"},
            headers: ['Name', 'Value', 'Price', 'Action']                               
        }).inject(container);

var firstRow = optionsTable.push(['<input type="text" name="option[0][name]" class="w70">',
           '<input type="text" name="option[0][value]" class="w50">',
           '<input type="text" name="option[0][price]" class="w50">',
           '<a href="javascript:void(0);" class="add_option">Add</a>'
         ]);

firstRow.tr.getElement('.add_option').addEvent('click', function(){
    count ++;
    var newRow = optionsTable.push(['<input type="text" name="option['+count+'][name]" class="w70">',
       '<input type="text" name="option['+count+'][value]" class="w50">',
       '<input type="text" name="option['+count+'][price]" class="w50">',
       '<a href="javascript:void(0);" class="product_remove_option">Remove</a>'
    ]);
    newRow.tr.getElement('.product_remove_option').addEvent('click', function(){
        newRow.tr.destroy();
    });                   
});
于 2013-03-28T11:19:28.663 に答える