CODEWITHSUNDEEP
prototypeprototypejs
Zahirabbas
Zahirabbas

Reputation: 1119

How to append row in table before specific row using prototype only

I am trying to append row in table using prototype but it will always append row at the end of table how can i add it on after specific row here is my code that i am used to append row using template.I would like to append row above buttonsrow id. This id is assigned to specific row.

//<![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));
}
//]]>

Upvotes: 0

Views: 490

Answers (1)

Geek Num 88
Geek Num 88

Reputation: 5312

Actually it should be pretty easy to do.

Given the id of the element you want to put the HTML before is buttonsrow -- 

var content = "<tr><td></td></tr>";
$('buttonsrow').insert({'before':content});

http://api.prototypejs.org/dom/Element/prototype/insert/

Upvotes: 3

Related Questions