Adding row to HTML table via JavaScript

I have looked over a couple of examples in EE and arrived at one I thought would work best for me:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20930087.html

Unfortunately I am having troubles with this...

I am able to "clone" row but when I try

tb.appendChild(newProductRow);

it adds the entire new row into the first cell of the first row of the table.


function AddNewRow() {        
    var tb = document.getElementById("ProductsForProfileBody");
    var newProductRow,  textCell;
            
    newProductRow = document.getElementById('cloneThis').cloneNode(true); 
    newProductRow.style.display = "block";  
    tb.appendChild(newProductRow); 
}
 
<table id="ProductsForProfile" class="producttable" style="margin-top: 20px;">		
<tbody id="ProductsForProfileBody">
<tr id='cloneThis' style="display:none;">  
<td class="productname">Product 1</td> <!--Product-->
<td class="productTableReadOnly">60%</td> <!--First Year Commission Rate-->
<td class="productTableReadOnly"></td> <!--Years 2-9-->
<td class="productTableReadOnly"></td> <!--Year 10+-->
<td ></td> <!--blank-->
<td class="premium">100000</td> <!--Premium-->
<td class="percent">10%</td> <!--Annual % Increase-->
<td ></td> 
</tr>
</tbody>
</table>

Open in new window

LVL 1
BruceAsked:
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.

hieloCommented:
The code below works ok for me. NOTE: I am assigning a unique id to the newly inserted rows.
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title></title>
 
<script type="text/javascript"><!--
var rowId=1;
function AddNewRow() {        
    var tb = document.getElementById("ProductsForProfileBody");
    var newProductRow,  textCell;
            
    newProductRow = document.getElementById('cloneThis').cloneNode(true);
    newProductRow.id="row" + rowId;
    rowId++;
    newProductRow.style.display = "block";  
    tb.appendChild(newProductRow); 
}
//--></script>
</head>
<body> 
<form>
<table id="ProductsForProfile" class="producttable" style="margin-top: 20px;">		
	<tbody id="ProductsForProfileBody">
		<tr id='cloneThis' style="display:none;">
			<td class="productname" style="background-color:beige;">Product 1</td> <!--Product-->
			<td class="productTableReadOnly">60%</td> <!--First Year Commission Rate-->
			<td class="productTableReadOnly"></td> <!--Years 2-9-->
			<td class="productTableReadOnly"></td> <!--Year 10+-->
			<td ></td> <!--blank-->
			<td class="premium">100000</td> <!--Premium-->
			<td class="percent">10%</td> <!--Annual % Increase-->
			<td ></td> 
		</tr>
	</tbody>
</table>
<input type="button" value="Clone" onclick="AddNewRow()"/>
</form>
</body>
</html>

Open in new window

0
pronaneCommented:
http://www.mredkj.com/tutorials/tabledeleterow.html

you have 3 options, the easiest way would be to use the cloneNode function
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
BruceAuthor Commented:
hielo, yikes man! I am baffled.  I took your code direct into mine and I still get the same result.  The "cloned" new row get completely inserted into the first cell of the "Product" column.

FYI, I removed from my example two header rows.  I tested your code with these two header rows and I still get the same result.  See snippet for a more complete view of the table I am trying to modify...

pronane, I am looking into your link now...
<table id="ProductsForProfile" class="producttable" style="margin-top: 20px;">		<tbody id="ProductsForProfileBody">
<tr >                                          
<th ></th> 
<th colspan="3" style="text-align:center; vertical-align:bottom; padding-bottom:0px;">Commission Rates</th> 						                
<th></th> 
<th></th> 
<th style="text-align:right; vertical-align:bottom; padding-bottom:0px;">Annual</th> 
<th></th> 
</tr> 
<tr >                                          
<th class="productname">Product</th> 
<th>First Year</th> 
<th>Years 2-9</th> 
<th>Years 10+</th> 
<th></th> 
<th style="text-align:right;">Premium</th> 
<th style="text-align:right;">% Increase</th> 
<th></th> 
</tr>
<tr id='cloneThis' style="display:none;">  
<td class="productname">Product 1</td> <!--Product-->
<td class="productTableReadOnly">60%</td> <!--First Year Commission Rate-->
<td class="productTableReadOnly"></td> <!--Years 2-9-->
<td class="productTableReadOnly"></td> <!--Year 10+-->
<td ></td> <!--blank-->
<td class="premium">100000</td> <!--Premium-->
<td class="percent">10%</td> <!--Annual % Increase-->
<td ></td> 
</tr>
</tbody>
</table>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

scrathcyboyCommented:
Just do it in two steps, it is much easier.  Say below the row you have with <TR id='Insert">
write the code to put below it, simply as --
<TR id = "added"><TD>&nbsp;</TD></TR>

Then write the code you want into the "added" with the inner.HTML function, that is the easiest to do.
0
scrathcyboyCommented:
sorry, the "added" should have been on the <TD>, not the <TR> since you are writing data to it.
0
hieloCommented:
I incorporated YOUR two table rows into my code an it works perfectly. I added CSS to what I posted originally plus your two additional "initial" rows so you can save it as hielo.html and run it so you see it in action. Most likely the reason things work differently on your system is that there may be some bad/illegal markup "throwing your browser off". Perhaps you are missing the DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

but you don't have to use the "strict". You could use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">

as well. Some browsers behave "weird" when you don't supply that.

My suggestion: rather than incorporating my code into yours, take the code I posted below and incrementally incorporate your design into mine. When I say incrementally I mean, add a little, save, check. If everything is OK, then repeat the same steps until you have fully incorporated your page.
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title></title>
 
<script type="text/javascript"><!--
var rowId=1;
function AddNewRow() {        
    var tb = document.getElementById("ProductsForProfileBody");
    var newProductRow,  textCell;
            
    newProductRow = document.getElementById('cloneThis').cloneNode(true);
    newProductRow.id="row" + rowId;
    rowId++;
    newProductRow.style.display = "block";  
    tb.appendChild(newProductRow); 
}
//--></script>
	<style type="text/css"><!--
	.productname{background-color:beige;}
	.premium{background-color:lightblue;}
	.percent{background-color:lightgrey;}
	td{border:1px dashed black;}
	--></style>
 
</head>
<body> 
<form>
<table id="ProductsForProfile" class="producttable" style="margin-top: 20px;">		
	<tbody id="ProductsForProfileBody">
		<tr>                                          
			<th></th> 
			<th colspan="3" style="text-align:center; vertical-align:bottom; padding-bottom:0px;">Commission Rates</th> 						                
			<th></th> 
			<th></th> 
			<th style="text-align:right; vertical-align:bottom; padding-bottom:0px;">Annual</th> 
			<th></th> 
		</tr>
		<tr>
			<th class="productname">Product</th> 
			<th>First Year</th> 
			<th>Years 2-9</th> 
			<th>Years 10+</th> 
			<th></th> 
			<th style="text-align:right;">Premium</th> 
			<th style="text-align:right;">% Increase</th> 
			<th></th> 
		</tr>
		<tr id='cloneThis' style="display:none;">
			<td class="productname">Product 1</td> <!--Product-->
			<td class="productTableReadOnly">60%</td> <!--First Year Commission Rate-->
			<td class="productTableReadOnly">&nbsp;</td> <!--Years 2-9-->
			<td class="productTableReadOnly">&nbsp;</td> <!--Year 10+-->
			<td>&nbsp;</td> <!--blank-->
			<td class="premium">100000</td> <!--Premium-->
			<td class="percent">10%</td> <!--Annual % Increase-->
			<td>&nbsp;</td> 
		</tr>
	</tbody>
</table>
<input type="button" value="Clone" onclick="AddNewRow()"/>
</form>
</body>
</html> 

Open in new window

0
Computer101Commented:
Forced accept.

Computer101
EE Admin
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
Web Languages and Standards

From novice to tech pro — start learning today.