Solved

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

Posted on 2009-04-05
6
1,424 Views
Last Modified: 2012-05-06
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
Comment
Question by:Victor Kimura
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075041
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
 

Author Comment

by:Victor Kimura
ID: 24076016
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24076256
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Victor Kimura
ID: 24076934
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24077049
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
 

Author Closing Comment

by:Victor Kimura
ID: 31566904
Thank you.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now