• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1479
  • Last Modified:

appendChild(clone) with new id at end of <tr>

Hi,

I have this code but I have to now make the code add a new id as this existing code is cloning the row with the same id. Then I have to appendChild(clone with new id) AFTER the last <tr> tag.

Thank you,
vkimura
<table border="1">
<tr><td><input type="button" value="delete row" onclick="deleteRow()" /></td></tr>
<tr><td><input type="button" value="append row" onclick="copyAppendRow()" /></td></tr>
<tr id="row1"><td>field 1</td></tr>
<tr id="row2"><td>field 2</td></tr>
</table>
<script type="text/javascript">
/*delete first row:*/
function deleteRow() {
	document.getElementById("row1").parentNode.removeChild(row1);
}
 
function copyAppendRow() {
	/*clone Element:*/
	var row2El=document.getElementById("row2");
	var clone=row2El.cloneNode(true);
	clone.id="row3";
	/*get Element with id row2, clone Content into variable 'clone'*/
	/*true or false refers to cloning the content*/
	/*now do whatever you want with the cloned element*/
	row2El.appendChild(clone);
	/*in this case we are appending it to the row2 Element*/
}
 
</script>

Open in new window

0
Victor Kimura
Asked:
Victor Kimura
  • 3
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
You do not want to append the row to the other row.
You want to append the row to the tbody

This code was tested in IE7 and FF3

<table border="1" id="t1">
<tr><td><input type="button" value="delete row" onclick="deleteRow()" /></td></tr>
<tr><td><input type="button" value="append row" onclick="copyAppendRow()" /></td></tr>
<tr id="row1"><td>field 1</td></tr>
<tr id="row2"><td>field 2</td></tr>
</table>
<script type="text/javascript">
/*delete first row:*/
function deleteRow() {
        document.getElementById("row1").parentNode.removeChild(row1);
}
 
function copyAppendRow() {
        /*clone Element:*/
        var row2El=document.getElementById("row2");
        var clone=row2El.cloneNode(true);
        clone.id="row3";
        /*get Element with id row2, clone Content into variable 'clone'*/
        /*true or false refers to cloning the content*/
        /*now do whatever you want with the cloned element*/
        /*in this case we are appending it to the row2 Element's parentNode (the tbody) */
        row2El.parentNode.appendChild(clone);
        alert(document.getElementById('t1').innerHTML)
}
 
</script>

Open in new window

0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi mplungjan,

Thank you so much for this insight and code. Works well. Is there an easy way to change the id and increment it. So the next id is "row3", "row4", "row5", etc.

Thank you,
vkimura
0
 
Michel PlungjanIT ExpertCommented:
Sure

But do you want to add the row after a given row, or always to the end?



<table border="1" id="t1">
<tr><td><input type="button" value="delete row" onclick="deleteRow()" /></td></tr>
<tr><td><input type="button" value="append row" onclick="copyAppendRow()" /></td></tr>
<tr id="row1"><td>field 1</td></tr>
<tr id="row2"><td>field 2</td></tr>
</table>
<script type="text/javascript">
/*delete first row:*/
function deleteRow() {
  document.getElementById("row1").parentNode.removeChild(row1);
}
 
function copyAppendRow() {
  var table = document.getElementById("t1");
  var lastRow = table.rows[table.rows.length-1]; // last row
 
  /*clone Element:*/
  /*get row, clone Content into variable 'clone'*/
  var clone=lastRow.cloneNode(true);
  /*true or false refers to cloning the content*/
//  clone.id="row"+(table.rows.length-1); // call it rowX where X is the current number of actual rows
  // get the ID from the row instead of using the number of rows
  var num = (lastRow.id.indexOf('row')!=-1)?parseInt(lastRow.id.replace('row','')):1; // perhaps we deleted all rows
  var id = "row"+(num+1);
  clone.id=id;
  /*now do whatever you want with the cloned element*/
  /*in this case we are appending it to the TBODY */
  lastRow.parentNode.appendChild(clone);
  alert(table.innerHTML); // show what we did
}
 
</script>

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi mplungjan,

Wow, that's great. I suppose it would be nice to be able to add the row to the end or after or before. Is it easy to show me how?

Thank you so much for your help. You're really a genius at Javascript. It's something I'm beginning to learn.

Cordially,
vkimura
0
 
Michel PlungjanIT ExpertCommented:
Here is more

You want to look at insertBefore and insertAfter

slightly modified version of this
http://www.dynamicdrive.com/forums/showthread.php?t=38846

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript">
		<!--
		var count = 0;   			
		function createR() {
			var roW = document.createElement('tr');
 
			var coL = document.createElement('td');
			coL.style.borderBottom = '1px dashed #c2c2c2';
 
			var linK = document.createElement('a');
			linK.style.textDecoration = 'underline';
			linK.appendChild(document.createTextNode('Remove'));
			linK.href = '#';
			linK.onclick = destroyR;
 
			coL.appendChild(document.createTextNode('Element Number ' + [count++] + ' has been added! '));
			coL.appendChild(linK);
			roW.appendChild(coL);
			createR.tb.insertBefore(roW, createR.tb.firstChild);
 
//			setTimeout(createR, 5000);
 
		}
	
		function destroyR(e) {
			e = e || window.event;
			if(e.preventDefault) e.preventDefault();
			e = e.target || e.srcElement;
			while(e.nodeName != 'TR') e = e.parentNode;
			e.parentNode.removeChild(e);
			return false;
		}
 
		window.onload = function(){
			var t = document.createElement('table');
			createR.tb = document.createElement('tbody');
			t.appendChild(createR.tb);
			document.body.appendChild(t);
		}
//		-->
	</script>
</head>
<body>
	<p><a href="#" onclick="createR();return false;">Create</a></p>
 
</body>
</html>

Open in new window

0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now