aspose 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


Win a copy of Spring in Action this week in the Spring forum!
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: 61434
    
  67

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:
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Add & Delete Table rows dynamically