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 回答