How To: Adding/Removing New Table Row w/ Prototype

JavaScript
1

I’m a novice JS coder and have never used prototype. I’d like to dynamically add and remove rows (preferably a function I could simply call for each) to a table. Anyone have a code example that works across browsers?

Thanks.

2

Is it an absolute necessity that the script be in Prototype?

3 
document.observe('dom:loaded', function() {
var table = $$('table');
var rows = table.down('tr');
   rows.each(function(w) {
        w.observe('click', function(e) {
            this.remove();
        }

Not tested…this just looks for click on the tr element…when it receives a click it removes the row…but would definitely work but i can’t remember exactly how down() works so may not have got it 100%…assumes there is only one table on the page.

I know you asked how to add/remove rows but this should get you going…you need to look up the utility operators http://www.prototypejs.org/api/utilityr so you can start controlling things using classes/id’s…so say you had an add row button with a id of
‘add’ you could do :

 var addthis = $('add');
 addthis.observe('click', function(e) {
//use new element and appendChild here to add a row
}

By the way…i’d go with jquery…it’s much easier for a newbie javascripter to pick up. Prototype has an OO feel to it whereas jquery is based around css selectors…and it’s much more lightweight!

4

Ok, I am certainly learning this as I go. I unfortunately haven’t been able to find the best documentation for Prototype, but I’m managing. So this seems to do the trick for inserting a row. That part is working, though I’m sure there is a far better way to do this, as well as some error checking, etc. to put in place (right?).



$('equipment').down('tr').insert(after: 'tr string to insert');

Now I’m having trouble figuring out how to remove a specific row. I’d like to have a function call like “removeRow(this)” that then uses the prototype stuff in removeRow (.remove()) to do the delete. But what I can’t figure out is how to pass the row element to the function.

5

Well learning as you go is a good way to go. For documentation use the official prototype api docs: http://www.prototypejs.org/api and search the web for the bungee book.

As for your add row code…i’m not sure what the div with the id of equipment is…if you’re using a button to allow the user to click to add a row then i’d go with the code i posted above…grab the element by it’s id and get a reference to it and then observe clicks on it.

What functionality do you hope to provide for allowing the user to delete a row? Are you going to have a cross icon next to/inside the each row?

6

I’m using the official API docs, which are helpful to an extent. I’ll look for the bungee book you mentioned.

My code is evolving as I figure more things out about using Prototype. Yes, the goal is to have a remove icon of some sort attached to each row.

7

Well then on document load just grab a reference to all remove icons…below i’ve done it by applying a class of removeButton to each and using $$ to grab them all. This way you don’t need to have inline event handlers. Once you’ve got that reference use prorotypes each method (just like a for loop) to assign an event ‘listenser’ for the click event for the button. Then once you observer a click on the element do the remove…something like:


document.observe('dom:loaded', function() {
    var buttons = $$('.removeButton');
    buttons.each(function(w) {
        w.observe('click', function(e) {
            this.remove();
        }
    }
}
8

The rows will not be loaded initially, but I think I can take what you’ve suggested and go from there. Thanks.

9

Yeah the code above won’t work if they’re dynamically created. You just need to use this bit when you create the new row… row.observe(‘click’, function(e) {

10

Great, thanks. I actually have the row remove piece working. For the most part, anyhow. I posted about it in another thread, but essentially what I want is to remove the row, then update all remaining rows’ background colors so that the row backgrounds remain in an alternating pattern.

I usee $$(‘tbody tr’).each to iterate through them, but for some reason doing it this way still returns the removed row and I’m not sure how to get around this. Any suggestions?

11

Ugh, this is getting mighty frustrating.

I just switched over to Netscape 7 (along with IE 6 are the two browsers I have to code for) and nothing worked. I thought prototype was suppose to make things cross-browser compatible!?!

12

Post your code. Get a script debugger for IE and see what it’s complaining about.