This week's book giveaways are in the Refactoring and Agile forums.
We're giving away four copies each of Re-engineering Legacy Software and Docker in Action and have the authors on-line!
See this thread and this one for details.
Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Add & Delete Table rows dynamically

 
Dev Anand
Ranch Hand
Posts: 41
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 41
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<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
Pie
Posts: 64631
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Without code tags, I will not look at your code.
 
Dev Anand
Ranch Hand
Posts: 41
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi David,
Thanks for your suggestion.
 
David Newton
Author
Rancher
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic