如何仅使用原型在特定行之前在表中追加行

时间:2017-10-17 02:54:19

标签: prototype prototypejs

我正在尝试使用原型在表中附加行,但它总是在表的末尾附加行如何在特定行之后添加它这里是我的代码,我习惯使用模板追加行。我想在buttonsrow id之上附加一行。此ID分配给特定行。

//<![CDATA[


var groupPriceRowTemplate = '<tr>'
    + '<td class="label"><input name="extraoption[]" value="" type="text" class="input-text"></td>'
    + '<td class="value"><input name="extravalues[]" value="" type="text" class="input-text"></td>'
    +'<td class="value"><button title="Delete Group Price" type="button" class="scalable delete icon-btn delete-specification"><span>Delete</span></button></td>'
    + '</tr>';



var groupPriceControlspec = {
    template: new Template(groupPriceRowTemplate, new RegExp('(^|.|\\r|\\n)({{\\s*(\\w+)\\s*}})', '')),
    addItem : function (event) {
        console.log(Event.findElement(event, 'tr'));
        Element.insert($('specification_container'), {
            bottom : this.template.evaluate()
        });
        this.bindRemoveButtons();

            },
    deleteItem: function(event) {
        var tr = Event.findElement(event, 'tr');
        if (tr) {
             Element.select(tr, ['td']).each(function(element) {
                element.remove();
            });
        }
        return false;
    },
     bindRemoveButtons : function(){
        var buttons = $$('div.specification-container .delete-specification');
        for(var i=0;i<buttons.length;i++){
            if(!$(buttons[i]).binded){
                $(buttons[i]).binded = true;
                Event.observe(buttons[i], 'click', this.deleteItem.bind(this));
            }
        }

}
}
groupPriceControlspec.bindRemoveButtons();
if($('addnewspecrow')){
    Event.observe('addnewspecrow', 'click', groupPriceControlspec.addItem.bind(groupPriceControlspec));
}
//]]>

1 个答案:

答案 0 :(得分:3)

实际上它应该很容易做到。

考虑到您想要将HTML放在ZoneId.getAvailableZoneIds() -

之前的元素的ID
buttonsrow

can be changed without notice, even at runtime