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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
pronaneConnect With a Mentor Commented:
http://www.mredkj.com/tutorials/tabledeleterow.html

you have 3 options, the easiest way would be to use the cloneNode function
0
 
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
 
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
hieloConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.