Javascript-delete rows with unchecked checkbox

**raj712** · Oct 27, 2010 03:36

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!

**dogFang** · Oct 27, 2010 04:50

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>

**raj712** · Oct 27, 2010 05:16

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.

**dogFang** · Oct 27, 2010 06:09

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>

**raj712** · Oct 27, 2010 07:05

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

**raj712** · Oct 27, 2010 08:04

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.

**dogFang** · Oct 27, 2010 09:12

Just change the name of the array.

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

**raj712** · Oct 27, 2010 11:57

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

User Tag List

Thread: Javascript-delete rows with unchecked checkbox

Thread Tools

Display

Javascript-delete rows with unchecked checkbox

Bookmarks

Bookmarks

Posting Permissions