Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML
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.
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);
		}
	}
		
}	
<<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 1:28am
Rate this: bad
good
Please Sign up or sign in to vote.

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
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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
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;
        }
    }
  Permalink  
Comments
Ashokraj29 at 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.

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

  Print Answers RSS
0 OriginalGriff 365
1 Sergey Alexandrovich Kryukov 329
2 BillWoodruff 210
3 Afzaal Ahmad Zeeshan 204
4 CPallini 185
0 OriginalGriff 5,515
1 DamithSL 4,451
2 Maciej Los 3,902
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,175


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 23 Jan 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100