Add & Delete Table rows dynamically

[Dev Anand]

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]

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]

<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]

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

[Dev Anand]

Hi David,
Thanks for your suggestion.

  
<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;
		  		}
		  	}  	    	
		}
		

  

[David Newton]

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):

function delReceiver(id) {
    var st = id;
    var lastrow = tb1.rows.length;
    if ((lastrow > 0) && ((lastrow - 1) < id)) {
        st = id - (lastrow - 1);
    }

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

    var tb1 = document.getElementById('rec_mail1');
    tb1.deleteRow(st);
    count = count - 1;
}

For comparison:

$ wc js2*
  15   54  431 js2-new.js
  20   75  800 js2-orig.js