SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it an absolute necessity that the script be in Prototype?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    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 :

    Code JavaScript:
     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. #4
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?).

    Code JavaScript:
     
    $('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. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  8. #8
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    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:

    Code JavaScript:
    document.observe('dom:loaded', function() {
        var buttons = $$('.removeButton'); 
        buttons.each(function(w) {
            w.observe('click', function(e) {
                this.remove();
            }
        }
    }
    The rows will not be loaded initially, but I think I can take what you've suggested and go from there. Thanks.

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    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) {
    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. #11
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post your code. Get a script debugger for IE and see what it's complaining about.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •