append row in table using javascript

HTML
<input type='checkbox' name="test">
<input type='checkbox' name="test1">
<input type='checkbox' name="test2">
<input type='checkbox' name="test3">
<table>
{foreach loop=$data item=item}
<tr>
<td>http://silicose.com</td>
</tr>
<tr><td>break</td></tr>
{/foreach}

</table>

I want to append row<tr><td>http://lovetomarry.com</td></tr><tr><td>break</td></tr>
after every selection of check box, and remove when its unchecked

It has to be done by javascript and not by jquery.
LVL 15
InsoftserviceAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pierre CorneliusCommented:
Here is a demo on how you can do this.

<html>
<head>
	<script type="text/javascript">
		var your_row1 = "<td>http://lovetomarry.com</td>";
		var your_row2 = "<td>break</td>";
		
		
		function ToggleRow(RowName) {
			var t = document.getElementById("your_table");
			var r = document.getElementById("rn_"+RowName+"1");
			var r2 = document.getElementById("rn_"+RowName+"2");
			if (r) {t.removeChild(r); t.removeChild(r2);}
			else {
				var new_row = document.createElement("tr");
				new_row.id = "rn_"+RowName+"1";
				new_row.innerHTML = your_row1;
				t.appendChild(new_row);
				
				var new_row = document.createElement("tr");
				new_row.id = "rn_"+RowName+"2";
				new_row.innerHTML = your_row2;
				t.appendChild(new_row);
			}						
		}
	</script>
</head>
<body>
	<input type='checkbox' name="test"  onclick="ToggleRow('test');">test
	<input type='checkbox' name="test1" onclick="ToggleRow('test1');">test1
	<input type='checkbox' name="test2" onclick="ToggleRow('test2');">test2
	<input type='checkbox' name="test3" onclick="ToggleRow('test3');">test3

	<table id="your_table">
		<tr><td>http://silicose.com</td></tr>
		<tr><td>break</td></tr>
		
		<tr><td>http://silicose.com</td></tr>
		<tr><td>break</td></tr>

		<tr><td>http://silicose.com</td></tr>
		<tr><td>break</td></tr>		
	</table>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sar1973Commented:
0
COBOLdinosaurCommented:
Dynamic table generation an modification can use the table methods assigned in the DOM.

You mhgt find this dynamic table build helpful.

Once you have built the structure you can just create the string you need for content an put it in the innerHTML of the target cells.

Cd&
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

InsoftserviceAuthor Commented:
thx for the comments.

one more doubt i am getting the data from popup which has textarea how to paste it in original page through which popup has taken place.
it works if use single textarea but if try for multiple it fails.

         window.opener.document.forms[0].access_ip_listval.value = addedvalue+"|"+user ;


access_ip_listval is for single name of text area hardcode.
but it fails for dynamic
         window.opener.document.forms[0].access_ip_list+user.value = addedvalue+"|"+user ;


http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28252393.html#a39529981
0
COBOLdinosaurCommented:
I don't know what you think you are doing with:

window.opener.document.forms[0].access_ip_list+user.value = addedvalue+"|"+user ;


But it does not look anything like a valid reference.

Cd&
0
InsoftserviceAuthor Commented:
@ COBOLdinosaur

window.opener.document.forms[0].access_ip_list+user.value = addedvalue+"|"+user ;

how to add dynamic this text access_ip_list+user

o/p alert("access_ip_list"+user)
gives the exact id of the textarea where these value has to be saved.

I hope u got my point.

If you click the checkbox which is written in my question a popup is open where if data is written has to replace the text "http://lovetomarry.com" .
I hope now its clear
0
Pierre CorneliusCommented:
@insoftservice

That seems like another question to me and also one where more information is needed. Perhaps you should close this question and ask another one.
0
COBOLdinosaurCommented:
o/p alert("access_ip_list"+user)  Is a string.  You are trying to use that string as the name of a property of the form object.  No such property exists, so such a statement will always fail.

What you are trying to do does not make any sense logically.  If you want to append then you have to use the DOM methods to create a new set of objects and then attach properties to them. you can't just pick a new property out of thin air without an object to attach it to.

Cd&
0
InsoftserviceAuthor Commented:
@PierreC please check my previous comments i had already assigned new ticket for the same.
0
InsoftserviceAuthor Commented:
It worked.
thx
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.