SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding/removing rows in table - possible to copy row properties?

    Hello again people! Hope everyone is well! I have another JS question for you, hope you could help me out?

    I'm currently working on code to remove and add rows in a table... But the rows I want to remove and then insert again into the table has a style, an onclick event, a few other attributes...

    Is there a way of doing a straight copy of the row that is getting deleted? So when it comes to inserting it again, it will retain all the same attributes, style and events?

    At the moment, I'm cycling through the cells in the row, copying the data within each cell, getAttribute stuff... But surely there maybe a simple way? I know of the moveRow JS method - but this seems IE only (probably the only good thing that IE has! haha)

    Many thanks for any help people... Really hope I can get good enough so I can start helping people back! Cheers...

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you keep a reference to the row you remove, you can then add that very row back in again later. It will keep all its attributes.

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry... I'm a little rubbish... Could you explain a little further?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a butchers at cloneNode...

    http://docs.mandragor.org/files/Misc...P-5-SECT-2.3.8

    You will be able to clone the row into a variable and then re-append it to the table afterwards.


  5. #5
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers... looks perfect.

    I can't believe, also, that I've missed the site called QuirksMode.org for soooo long... This will really help me get my head together when it comes to Javascript. I've been coding for a few years, but never touched Javascript -believe it or not - it's a funny old language isn't it. But kind of cool for some reason...

    Thanks again for your help. I'll report back if it did what I'm expecting it to do.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But you don't need to clone the node if you already have a reference to it.
    Code:
    <body>
    
    <table>
    <thead><th>Heading</th></thead>
    <tbody id="myBody">
    <tr id="moveMe"><td style="color:red;">Row 1</td></tr>
    <tr><td style="text-align:center;">Row 2</td></tr>
    <tr><td><input type="button" value="Remove Row 1" onclick="shiftRow();" /></td></tr>
    </tbody>
    </table>
    
    <p><input type="button" value="Put it back" onclick="putBack();" /></p>
    
    <script type="text/javascript">
    // Get reference to a row in the table
    var row = document.getElementById("moveMe");
    
    // Now we have a reference, we can remove it from the table
    function shiftRow(){
      row.parentNode.removeChild(row);
    }
    
    // Even though the row has been removed, we still have a reference to the element.
    // It is no longer in the document tree, it is not displayed
    // but it is in memory
    
    // and we can put it back at the bottom of the table, attributes pre-packaged
    function putBack(){
      var tbl = document.getElementById("myBody");
      tbl.appendChild(row);
    }
    </script>
    
    </body>
    So, no need to create a copy of the row if we already have the original stored in memory.

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recall there being a problem when inserting a node that already exists but I had my wires crossed. I remembered a scenario where I had to remove an element and appending it simply moves it.

    You can insert it as r51 said..

    Sorry for the confusion.


  8. #8
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CHeers for this help... But I'm still having a problem here...

    I need to basically take a particular row out of the table... This is cool as each row has a unique ID anyhow... So I can make a reference fine, and I can remove the row fine... But when it comes to inserting it again, how do I do it so I can insert into the table at a particular index... This is particular to my project here, but I basically have a new row index for the table, where the copied row needs to be put back in... I've tried insertRow(new_index) and try to appendChild and copy the referenced old row into that, but this obviously doesn't work correctly as it's copying a <tr> into a <tr> kind of thing...

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the insertBefore(new, existing) method to insert the row before an existing row.
    Code:
    <body>
    
    <table>
    <thead><th>Heading</th></thead>
    <tbody id="myBody">
    <tr id="moveMe"><td style="color:red;">Row 1</td></tr>
    <tr><td style="text-align:center;">Row 2</td></tr>
    <tr id="beforeMe"><td><input type="button" value="Remove Row 1" onclick="shiftRow();" /></td></tr>
    </tbody>
    </table>
    
    <p><input type="button" value="Put it back" onclick="putBack();" /></p>
    
    <script type="text/javascript">
    // Get reference to row to be removed
    var row = document.getElementById("moveMe");
    
    // Remove row
    function shiftRow(){
      row.parentNode.removeChild(row);
    }
    
    // Get reference to tbody
    // Get reference to row before which we want to insert
    // Insert row in right place
    function putBack(){
      var tbl = document.getElementById("myBody");
      var tr = document.getElementById("beforeMe");
      tbl.insertBefore(row, tr);
    }
    </script>
    
    </body>

  10. #10
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r51 View Post
    Use the insertBefore(new, existing) method to insert the row before an existing row.
    Code:
    <body>
    
    <table>
    <thead><th>Heading</th></thead>
    <tbody id="myBody">
    <tr id="moveMe"><td style="color:red;">Row 1</td></tr>
    <tr><td style="text-align:center;">Row 2</td></tr>
    <tr id="beforeMe"><td><input type="button" value="Remove Row 1" onclick="shiftRow();" /></td></tr>
    </tbody>
    </table>
    
    <p><input type="button" value="Put it back" onclick="putBack();" /></p>
    
    <script type="text/javascript">
    // Get reference to row to be removed
    var row = document.getElementById("moveMe");
    
    // Remove row
    function shiftRow(){
      row.parentNode.removeChild(row);
    }
    
    // Get reference to tbody
    // Get reference to row before which we want to insert
    // Insert row in right place
    function putBack(){
      var tbl = document.getElementById("myBody");
      var tr = document.getElementById("beforeMe");
      tbl.insertBefore(row, tr);
    }
    </script>
    
    </body>
    Thank you for your help. This sorted me out in the end! Thanks again


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
  •