SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript-delete rows with unchecked checkbox

    I have a table with about 20rows, which contain a checkbox and a bit of text each. What I'm trying to find a way to do is to have delete button at the bottom of the page.When i clicked on DELETE button, it should delete records of checked checkbox rows. I need to delete all the table rows which contain CHECKED textboxes.and remaining checkboxes should be displayed. And we should keep remaining checkboxes in ARRAYLIST.

    I need to do this in JavaScript (which is what I'm having trouble with) / if in rear case JSP is accepted- I've been able to get bits of it to work at various times, but I'm running out of time and I really need help. Any suggestions anyone has would be more than appreciated!
    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically like this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    function remove() {
    var aObj=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    var i=aObj.length; 
    while(i--) { 
        if(!aObj[i].getElementsByTagName('input')[0].checked) {
            aObj[i].parentNode.removeChild(aObj[i]);
            }
    	}
    }
    </script>
    
    <style type="text/css">
    td {text-align:right;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <table>
    <tbody>
        <tr><td><label>doe<input type="checkbox"></label></td></tr>
        <tr><td><label>ray<input type="checkbox"></label></td></tr>
        <tr><td><label>me<input type="checkbox"></label></td></tr>
        <tr><td><label>far<input type="checkbox"></label></td></tr>
        <tr><td><label>so<input type="checkbox"></label></td></tr>
        <tr><td><label>la<input type="checkbox"></label></td></tr>
    </tbody>
    <tfoot>
    	<tr><td><button type="button" onclick="remove();">remove</button></td></tr>
    </tfoot>
    </table>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thank you for your reply
    But in this program ,it is deleting unchecked checkboxes.
    I want to delete checked checkboxes.And store all unchecked checkboxes in Arraylist(collection). and print that arraylist.

    Please, your reply is valuable to me.

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    function remove() {
    var aObj=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    var i=aObj.length; 
    var unchecked = [];
    while(i--) {
    	var box =aObj[i].getElementsByTagName('input')[0]; 
        if(box.checked) {
            aObj[i].parentNode.removeChild(aObj[i]);
            }
        else {
            unchecked.push(box.value);
            }
    	}
    alert(unchecked);
    }
    </script>
    
    <style type="text/css">
    td {text-align:right;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <table>
    <tbody>
        <tr><td><label>doe<input type="checkbox" value="doe"></label></td></tr>
        <tr><td><label>ray<input type="checkbox" value="ray"></label></td></tr>
        <tr><td><label>me<input type="checkbox" value="me"></label></td></tr>
        <tr><td><label>far<input type="checkbox" value="far"></label></td></tr>
        <tr><td><label>so<input type="checkbox" value="so"></label></td></tr>
        <tr><td><label>la<input type="checkbox" value="la"></label></td></tr>
    </tbody>
    <tfoot>
    	<tr><td><button type="button" onclick="remove();">remove</button></td></tr>
    </tfoot>
    </table>
    </form>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help...it woks

    But please , could we store all these unchecked checkboxes in ARRAYLIST or any collection .....and print below that remove button..


    Please , help me

  6. #6
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please, help me out....
    I want to store all unchecked checkboxes in an Arraylist in java(in should be in scriptlet)...and print it after clicking on remove button

    I am new in javascript and java....

    Thank you for your help in advance.

  7. #7
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just change the name of the array.

    The contents of the array can be written to the document using innerHTML

  8. #8
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Thanks for your reply...
    i have tried using innerHtml.....but i dont know much about javascript.I am new in Javascript. So, could you help me and send me example code to store that unchecked checkboxes in arraylist i.e. collections....

    Please....Help me out


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
  •