SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Delete table row

    Hi all,

    I have searched through the forum for any threads on this, but couldnt apply to examples to my situation....

    I have a table which is populated with information from a database
    <cfform name="emailform">
    <table id="emails">
    <tr>
    <th>name </th>
    <th><a href="#">delete</a></th>
    </tr>
    <cfoutput query="name_art">
    <tr>
    <td>#name_art#</td>

    <td>
    <cfinput type="checkbox"
    name="MessageNumber"></td>
    </tr>
    </cfoutput>

    </table>
    </cfform>

    see here

    I have been struggling to come up with the javascript that would delete all the rows from the table which have been checked..

    Any help would be appreciated
    discover song meanings and more http://www.music-explained.com

  2. #2
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well lets see, first you can try this:

    Code JavaScript:
    function unCheck(field)
    {
    for (i = 0; i < field.length; i++)
    	field[i].checked = false ;
    }

    and finally body section:

    Code JavaScript:
    <form name="emailform">
    <b>Your Favorite Scripts & Languages</b><br>
    <input type="checkbox" name="list" value="1">anything<br>
    <input type="checkbox" name="list" value="2">anything<br>
    etc...
    <input type="button" name="unCheck" value="Delete"
    onClick="unCheck(document.emailform.list)">
    <br>
    </form>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi...thanks for response...

    Have tried the code you have up and am getting the error message uncheck is not a function..
    Also, would the code work with tables rows, like my original HTML indicates

    Cheers
    discover song meanings and more http://www.music-explained.com

  4. #4
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by namtax View Post
    hi...thanks for response...

    Have tried the code you have up and am getting the error message uncheck is not a function..
    Also, would the code work with tables rows, like my original HTML indicates

    Cheers
    sorry for the typo, do function unCheckAll

    I'm not sure what your asking with table rows, but as long as you assign the checkbox a name and value, then you could put it anywhere u want.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    i have changed the function to UnCheckAll and am getting the error message, field has no properties...

    heres the link

    http://www.musicexplained.net/emails_1.cfm

    Regardless, i think maybe you have misunderstood what im look for...

    Heres an example...

    http://www.mredkj.com/tutorials/tabledeleterow.html

    if you check the check box, then click delete, the entire table row will dissappear...

    I havent used their example html cos it doesnt apply to the table data that im creating, but thats essentially what im trying to achieve, but using the html i initially posted..

    cheers
    discover song meanings and more http://www.music-explained.com

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just thought id double check in case anyone else could assist..
    The reason i ask, is because im trying to implicate an ajax style system..like googlemail....
    And i read in a book that to make this work, you do the ajax call and remove the relevant data from database, then you would use ajax to remove the rows from the table..so no need to a page refresh.

    Any assistance would be appreciated..thanks
    discover song meanings and more http://www.music-explained.com

  7. #7
    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)
    The way to delete table rows is to use the deleteRow() method. I would do something like this:
    HTML Code:
    <table id="emails">
      <thead>
        <tr>
          <th>Name</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name1">Delete</label></td>
        </tr>
      </tbody>
    </table>
    Code Javascript:
    var delbutton = document.getElementById('delete');
    delbutton.onclick = deleteRows;
     
    function deleteRows() {
      var tab = document.getElementById('emails');
      var checkboxes = tab.getElementsByTagName('input');
      for (var i = 0, j = checkboxes.length; i < j; i++) {
        if (checkboxes[i].checked) {
           tab.deleteRow(i+1);
        }
      }
    }
    It is i+1 because the row containing the <th> elements won't have a checkbox.

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, ...thankyou raffles..that works like a beauty..

    The only issue is, that it doesnt seem to delete multiple rows, if multiple rows are checked, is there anyway round this?

    Cheers
    discover song meanings and more http://www.music-explained.com

  9. #9
    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)
    There was a small error in that the loop needs to be run backwards. I tried this and if you check multiple checkboxes and then press Delete, the rows get removed:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <title>A</title>
    <script>function init() {
      var delbutton = document.getElementById('delete');
      delbutton.onclick = deleteRows;
    }
    function deleteRows() {
      var tab = document.getElementById('emails');
      var checkboxes = tab.getElementsByTagName('input');
      for (var i = checkboxes.length - 1; i > -1; i--) {
        if (checkboxes[i].checked) {
           tab.deleteRow(i+1);
        }
      }
    }
    window.onload = init;
    </script>
    <table id="emails">
      <thead>
        <tr>
          <th>Name</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name1">Delete</label></td>
        </tr>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name2"><label for="name2">Delete</label></td>
        </tr>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name3"><label for="name3">Delete</label></td>
        </tr>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name4"><label for="name4">Delete</label></td>
        </tr>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name5"><label for="name5">Delete</label></td>
        </tr>
        <tr>
          <td>Person</td>
          <td><input type="checkbox" name="list[]" value="name1" id="name6"><label for="name6">Delete</label></td>
        </tr>
      </tbody>
    </table>
    <button id="delete">Delete</button>

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi raffles...

    Unfortunately, it still doesnt appear to be working for me...
    Strangely if i tick rows 1,3 and 5 or rows 2,4 and 6..then hit delete it works fine, but if i try rows 2,3,4 or rows 1,2,3 it doesnt function properly..

    Any ideas??

    Thanks
    discover song meanings and more http://www.music-explained.com

  11. #11
    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)
    What browser are you using? I pasted the code I posted above into a blank file, saved it and opened it. It works in IE6 and Firefox 2 with any combination. I tried the combinations you suggest as well and it still works.

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi raffles, thank you for your help....
    Yes i pasted into a new file and now it works.....
    For some reason, when i pasted the code into an existing file it wasnt functioning properly..
    Have a look...

    http://www.musicexplained.net/emails_1.cfm

    cheers
    discover song meanings and more http://www.music-explained.com

  13. #13
    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)
    Not working properly yet because you're using the older code I posted. Use the code I posted in post #9, where the for loop iterates by doing i-- and not i++.

  14. #14
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes...one day javascript will make sense to me..ha ha
    Again, thanks for your help
    discover song meanings and more http://www.music-explained.com

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nicely done mate. I didn't know there was a function called deleteRow();

    what is the parameter it takes?

  16. #16
    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)
    The row index in the table.

    DOM:table.deleteRow

  17. #17
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought it was a great script and was going to use it on my page that required this 'row(s) delete' option through checkboxes, but then I suddenly figure out that this script will not work if I have "input" at any other row/column, which is not used for 'checkbox" ...

    I mean, .. .. Instead of this:
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name1">Delete</label></td>
    </tr>


    if you have this:
    <tr>
    <td><input type="text" value="person"></td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name1">Delete</label></td>
    </tr>
    ....

    then it will not work. My tables requires some input text field and so I had to use it; and then when I use your script, i dn't get the result i want (or as it is displayed on your example). .. but i'm sure you know why it is happening and you probably know how to solve it ... i would sincerely appreciate your cooperation regarding this problem

  18. #18
    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)
    It's because it cycles through all INPUT elements and checks for the "checked" property, which a text input box doesn't have. So it's better to cycle through all the input elements that have the name "list[]", which are all the checkboxes.
    Code Javascript:
    function init() {
      var delbutton = document.getElementById('delete');
      delbutton.onclick = deleteRows;
    }
    function deleteRows() {
      var tab = document.getElementById('emails');
      var checkboxes = tab.getElementsByName('list[]');
      for (var i = checkboxes.length - 1; i > -1; i--) {
        if (checkboxes.item(i).checked) {
           tab.deleteRow(i+1);
        }
      }
    }
    window.onload = init;

  19. #19
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to use your functions, but maybe, i didn't write them correctly, so not working ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Script Checkbox Rows Delete</title>
    <script>

    function init()
    { var delbutton = document.getElementById('delete');
    delbutton.onclick = deleteRows;
    }

    function deleteRows()
    { var tab = document.getElementById('emails');
    var checkboxes = tab.getElementsByName('list[]');
    for (var i = checkboxes.length - 1; i > -1; i--)
    { if (checkboxes.item(i).checked)
    { tab.deleteRow(i+1); }
    }
    }


    window.onload = init;
    </script>


    </head>

    <body>

    <table id="emails">
    <thead>
    <tr>
    <th>Name</th>
    <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name1">Delete</label></td>
    </tr>
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name2">Delete</label></td>
    </tr>
    <tr>
    <td><input type="text" value="Person"></td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name3">Delete</label></td>
    </tr>
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name4">Delete</label></td>
    </tr>
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name5">Delete</label></td>
    </tr>
    <tr>
    <td>Person</td>
    <td><input type="checkbox" name="list[]" value="name1" id="name1"><label for="name6">Delete</label></td>
    </tr>
    </tbody>
    </table>
    <button id="delete">Delete</button>

    </body>
    </html>






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
  •