SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Delete row from table

    I have a table:
    HTML Code:
    <table>
       <thead>
          <tr>
             <th>...</th
          <tr>
       </thead>
       <tbody>
          <tr>
             <td>...</td>
             <td>...</td>
          </tr>
       </tbody>
    </table>
    I have successfully managed to append a row to the table using the following JavaScript
    Code:
    function addRow(tableId)
    {
    
        var table = document.getElementById(tableId);
        var newRow = table.tBodies[0].rows[0].cloneNode(true);
        table.tBodies[0].appendChild(newRow);
    }
    I call this code using a '+' button in the last column of the table row, i.e.
    HTML Code:
    <a href="javascript:addRow(idOfTheTable);"><img src="plus.gif"></a>
    I would like now to be able to delete a specific row. The problem is that all the rows are to some degree anonymous. All I have to go on is the row index of the button that was clicked to delete the row. How can I determine the row index of image that was clicked, and use this to somehow delete that row?

    Many Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    First of all, don't do this:
    Code:
    <a href="javascript:addRow(idOfTheTable);"><img src="plus.gif"></a>

    Preferably put it all in an external JS file and simply loop through all your table cells with that function. If you don't want to do that, at least use onclick in your anchor and put "#" in the href.

    What you would do is use "this" to work out which row has been clicked. The link is clicked, and then you work your way up the DOM:
    Code:
    table.tBodies[0].removeChild(this.parentNode.parentNode);
    Something like that.

  3. #3
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you elaborate on your first point of abstracting all the functionality to external JS and looping? Also, I don't understand why you reference three levels up the tree as in parentNode.parentNode.parentNode to remove a row?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I edited it after that, it's only two parentNodes. One thing I don't get is, you want to have a link with the '+' image in the last cell on each row. But it's going to add a row at the bottom of the table and not immediately below the row you clicked on? If that's the case, it seems a bit pointless to have the '+' links on every row. Anyway, here goes.

    Assuming you have a link '+' to add rows and a link '-' to remove rows:
    HTML Code:
    <td>
      <a href="#" class="addrow"><img src="plus.gif"></a>
      <a href="#" class="removerow"><img src="minus.gif"></a>
    </td>
    Code:
    window.onload = function() {
      var table = document.getElementById('tableId');
      var newRow = table.tBodies[0].rows[0].cloneNode(true);
      var anchors = table.getElementsByTagName('a');
      for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        anchor.onclick = function() {
          if (this.className = 'addrow') {
            table.tBodies[0].appendChild(newRow);
          }
          elseif (this.className = 'removerow') {
            table.tBodies[0].removeChild(this.parentNode.parentNode);
          }
        }
      }
    }
    I haven't tested it but it ought to work. About the parentNode stuff, if you look at the HTML, you see that it's table > tbody > tr > td > a. You are trying to remove a child of the tbody (a tr). Since the way you work out which tr to remove is via the anchor that is clicked, you specify it by saying 'the tr of the td that this anchor is in', which is this.parentNode.parentNode.

  5. #5
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah that makes sense now. And I realise what you say about having a link in every row, and also that I am appending rows. I've noticed this is a bad design so think I may just have a <add><delete> button elsewhere and use checkboxes to determine what to delete; and just append when add is cliked to add a new empty row. Essentially this is an overtime request form for an arbitrary number of requests(rows), so the user can add a new blank row to fill in, or delete an erroneous or empty row.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah that makes sense. So the code I posted would be OK then. I'm not sure the checkboxes thing is a good idea. You still have to click on something on each row, so you might as well have it disappear immediately rather than then have to make one more trip to the delete button. I would leave the 'delete' link on each row and put a link saying 'add a row' at the bottom of the table.

  7. #7
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup that sounds good. Many thanks for your help.


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
  •