Question

如何删除我的表格行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?*/                        
        });

Answer 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();
    });                   
});

Answer 2

这应该做你想要的：

$('optionstable').getElements('tr').addEvent('click',function(){
  this.destroy();
});

mootools使用HtmlTable类动态添加/删除表行

2 个答案: