how to delete multiple rows in html using javascript

Question

5.00/5 (1 vote)

See more:

Quote:

I want to delete multiple rows by selecting checkbox.. how to do that. i can delete one row which i select. but if i select multiple checkbox means first index is not deleting and rows under it are getting deleted when i press delete button.

JavaScript

var temp=1;
function add()
{
	var x=document.forms["data"]["ename"].value;
	if(x==null || x=="")
	{
		alert("Enter your Name");
		return false;
	}
	var y=document.forms["data"]["eid"].value;
	
	if(y==null || y=="")
	{
		alert("Enter your ID no");
		return false;
	}
	if(temp<10)
	{
         var x=document.getElementById('res').insertRow(temp);   
         var sno=x.insertCell(0)   
         var name=x.insertCell(1)
	 var id=x.insertCell(2)   
	 sno.innerHTML="<input type='checkbox' id='cb' value="+ temp + ">";
         name.innerHTML=  document.forms["data"]["ename"].value;
         id.innerHTML=  document.forms["data"]["eid"].value;

	temp++;
	}
	
	
}

function delete1()
{
	
	for(var i=0; i<document.data1.cb.length; i++){
	if(document.data1.cb[i].checked)
		{
			
		document.getElementById('res').deleteRow(document.data1.cb[i].value);
		}
	}
		
}

HTML

<<blockquote class="FQ"><div class="FQA">Quote:</div>html>
	<head>
		<title> Database Of Employee </title>

		<script type="text/javascript" src="task3.js"></script>
		<link rel="stylesheet" type="text/css" href="task3.css" />
 
	<head>

	<body align="center">
		
		<div class="main">
			
			<form name="data" action="" method="" >
				<table align="center" id="data">
					<tr><td>Enter your name </td><td>: <input type="text" name="ename" size="25"></td><td>      </td>
						 <td><input type="reset" value="Add" onclick="add()"></td><br /></tr>
					<tr><td>Enter your ID  </td><td>: <input type="text" name="eid" size="25"></td><td></td>
						<td><input type="reset" value="Delete" onclick="delete1()"></td><br /></tr>
				</table>
			</form>
			
			<hr>
			<br />
			<br /><br />
			<div class="sub">
				<form name="data1">
					<table align="center" id="res" border="1" width="500" valign="top" >
					
						<tr><th>S.No</th><th>NAME</th><th>ID</th></tr>	
					
					</table>
				</form>
			<br /><br /><br />
			</div><!-- End of sub div-->
			
		</div><!-- End of main div-->	
		
		
	</body>

</html</blockquote>>

Posted 20-Jan-12 0:28am

Ashokraj29

Add a Solution

2 solutions

Solution 1

C#

for(var i=0; i<document.data1.cb.length; i++){
    if(document.data1.cb[i].checked)
        {

        document.getElementById('res').deleteRow(document.data1.cb[i].value);
        }
    }

document.data1.cb.length this value will be different when u delete one row
say
your total length is 10
now if u delete 1st row then length will be 9 and index value will be 1
so for loop will not be executing 10 times

s

for(var i=0; i<document.data1.cb.length
; i++){
    if(document.data1.cb[i].checked)
        {

        document.getElementById('res').deleteRow(document.data1.cb[i].value);
i=0;
        }
    }

Posted 20-Jan-12 1:12am

Sudip Saha

Comments

Ashokraj29 20-Jan-12 7:59am

ya using i=0; inside the if block its deleting multiple rows in one click but problem is its deleting all rows.. let us consider 10 rows are there. I'm selecting third row and sixth row and clicking delete button. third row is deleted and the sixth row and rows after six(ie 6,7,8,9,10) are also get deleting.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ashokraj29 · Accepted Answer · 2012-01-22T19:08:00

Solution 2

Quote:
function delete1()
{

for(var j=temp-2; j >= 0; j--)
{

if(document.data1.cb[j].checked)
{
document.getElementById("res").deleteRow(j+1);

}
}

}

if we use this method means we can delete multiple rows at a time

Posted 22-Jan-12 19:08pm

Ashokraj29