File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Add & Delete Table rows dynamically Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Add & Delete Table rows dynamically" Watch "Add & Delete Table rows dynamically" New topic
Author

Add & Delete Table rows dynamically

Dev Anand
Ranch Hand

Joined: Aug 30, 2009
Posts: 41
I have the following code to add and delete table rows dynamically. When i click Add button a new row is created with 'Del' button. When i press 'Del' button the respective row should get deleted. But, the next row is getting deleted. The want the appropriate row to be deleted.

I'm not able to find where it is going wrong.

Thanks in advance.

Regards
Dev Anand




-----------------------------Start Code-----------------------------------------

<script type="text/javascript">

var count=1;
function addReceiver()
{
var table1 = document.getElementById("rec_mail1");
if(count>9)
{
alert("You can send max of 10 Recipients only");
return false;
}
else
{
var rowCount = table1.rows.length;
var tableRow = table1.insertRow(rowCount);
tableRow.id="row"+count;

var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1+50;

var cell0= tableRow.insertCell(0);
var cell1= tableRow.insertCell(1);
var cell2= tableRow.insertCell(2);
var char= "id"+count;
var char1= "id"+count+"right";
cell0.innerHTML="<p>Receiver Name</p><p><input type=text name="+char+" id="+char+"></p>";
cell1.innerHTML="<p>Receiver Email Id</p><p><input type=text name="+char1+" id="+char1+"></p>";
cell2.innerHTML="<div class=delbut1><label><input type=button value=DEL onclick=delReceiver('"+count+"'); /></label></div> ";
count=count+1;
}
}
function delReceiver(id)
{
var tb1=document.getElementById('rec_mail1');
var lastrow=tb1.rows.length;
if(lastrow>0){
if((lastrow-1)<id)
{
var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1-50;
var st=id-(lastrow-1);
alert("st : "+st);
tb1.deleteRow(id-st);
count=count-1;
}
else{
alert("Id1 : "+id);
var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1-50;
tb1.deleteRow(id);
count=count-1;
}
}
}
</script>
---------------------------------code End------------------------------------
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

Please UseCodeTags when posting code or configuration. Unformatted code and configuration is very difficult to read. You can edit your post to include them by using the button.
Dev Anand
Ranch Hand

Joined: Aug 30, 2009
Posts: 41
<script type="text/javascript">

var count=1;
var count1=1;
function addReceiver()
{
var table1 = document.getElementById("rec_mail1");
if(count>9)
{
alert("You can send max of 10 Recipients only");
return false;
}
else
{
var rowCount = table1.rows.length;
var tableRow = table1.insertRow(rowCount);
tableRow.id="row"+count;

var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1+50;

var cell0= tableRow.insertCell(0);
var cell1= tableRow.insertCell(1);
var cell2= tableRow.insertCell(2);
var char= "id"+count;
var char1= "id"+count+"right";
cell0.innerHTML="<p>Receiver Name</p><p><input type=text name="+char+" id="+char+"></p>";
cell1.innerHTML="<p>Receiver Email Id</p><p><input type=text name="+char1+" id="+char1+"></p>";
cell2.innerHTML="<a href=\"javascript:delReceiver('"+(rowCount)+"');\">Del</a>";
//cell2.innerHTML="<div class=delbut1><label><input type=button value=DEL onclick=javascript:delReceiver('"+count+"'); /></label></div> ";
count=count+1;
}
}

function delReceiver(id)
{
var tb1=document.getElementById('rec_mail1');
var lastrow=tb1.rows.length;
if(lastrow>0)
{
if((lastrow-1)<id)
{
var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1-50;
var st=id-(lastrow-1);
alert("st : "+st);
tb1.deleteRow(id-st);
count=count-1;
}
else{
alert("Id1 : "+id);
var ht1=window.parent.document.getElementById('ifrmgeetings').height;
ht1=parseInt(ht1);
window.parent.document.getElementById('ifrmgeetings').height=ht1-50;
tb1.deleteRow(id);
count=count-1;
}
}
}

</script>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

Without code tags, I will not look at your code.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Dev Anand
Ranch Hand

Joined: Aug 30, 2009
Posts: 41
Hi David,
Thanks for your suggestion.
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

Then I'd assume you have an off-by-one error somewhere in your code. I found it hard to read, so I took the liberty of simplifying it for you. This is untested, but probably closer to what you want, and far more maintainable (IMO):For comparison:
 
jQuery in Action, 2nd edition
 
subject: Add & Delete Table rows dynamically
 
Similar Threads
Dynamic rows validation from javascript
window.print() not working IE
adding and deleting a row in html
how to delete multiple browse
Submit popup