Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    165
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using createElement to insert a new row into a table

    Code:
    <table id="test" style="width:200px;border: thin solid blue;">
    <tr>
    	<td>
    		Test row 1
    	</td>
    </tr>
    </table>
    Hi all, I have a table like above and want to use document.createElement to insert a new row at the end of the table before the close table tag, is this possible?

    My efforts so far have resulted in the following html:

    Code:
    <table id="test" style="width:200px;border: thin solid blue;">
    <tr>
    	<td>
    		Test row 1
    	</td>
    </tr>
    </TBODY>
    <TR>
           <TD>Test row 2</TD>
    </TR>
    Which doesn't display properly as table has already been closed

    This is the code I've knocked up for the test so far:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    </head>
    
    <script>
    	function test(tableObj)
    	{
    		alert(tableObj.innerHTML);
    		//var newTable = document.createElement("table");
    		var newRow = document.createElement("tr");
    		var newCol = document.createElement("td");
    		
    		newCol.innerText = "Test row 2";
    		newRow.insertBefore(newCol);
    		
    				
    		tableObj.appendChild(newRow)
    		alert(tableObj.innerHTML);
    	}
    </script>
    
    <body onload="test(document.all.test)">
    
    <table id="test" style="width:200px;border: thin solid blue;">
    <tr>
    	<td>
    		Test row 1
    	</td>
    </tr>
    </table>
    
    
    </body>
    </html>
    Appreciate comments, thx

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm incapable of using HTML, so it's in XHTML:
    Code:
    <?xml version="1.0"?>
    <!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">
    	<head>
    		<title>Table row insert with DOM</title>
    	</head>
    
    	<script type="text/javascript">
    		function addRow(table)
    		{
    			var newRow = document.createElement("tr");
    			var newCol = document.createElement("td");
    			var newTxt = document.createTextNode("Test row 2");
    
    			newCol.appendChild(newTxt);
    			newRow.appendChild(newCol);
    			table.appendChild(newRow);
    		}
    	</script>
    
    	<body onload="addRow(document.getElementById('table'))">
    		<table id="table" style="width:200px; border: thin solid blue;">
    			<tr>
    				<td>
    					Test row 1
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>
    This reference is everything you'll need for any DOM work.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    165
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thx for the effort, does it work for you?

    If i alert(table.innerHTML) after the add, I still get the same resulting html which does not display correctly:

    Code:
    <TBODY>
    <tr>
    	<td>
    		Test row 1
    	</td>
    </tr>
    </TBODY>
    <TR>
           <TD>Test row 2</TD>
    </TR>

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    You need to check whether the table contains a tbody element (it does in modern browsers, but sadly not in iew), and insert the tr element into the tbody instead of directly into the table - or you can create a new tbody tag to wrap it in.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    165
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
                             var tbody  = document.createElement("tbody");
    		var newRow = document.createElement("tr");
    		var newCol = document.createElement("td");
    		var newTxt = document.createTextNode("Test row 2");
    
    		newCol.appendChild(newTxt);
    		newRow.appendChild(newCol);
    		tbody.appendChild(newRow);
    		tableObj.appendChild(tbody)
    		alert(tableObj.innerHTML);
    Ok, the following code works but has 1 problem, the resulting html is:

    Code:
    <TBODY>
    <TR>
    <TD>Test row 1 </TD></TR>
    <TBODY>
    <TR>
    <TD>Test row 2</TD></TR></TBODY>
    I could edit the innerHTML to remove the 2nd tbody but is there any way of doing the same without having the extra tbody?

    Would the tbody starting in the center upset the display of the table in any or all browsers?

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Sorry, forgot about the tbody.
    Code:
    <?xml version="1.0"?>
    <!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">
    	<head>
    		<title>Table row insert with DOM</title>
    	</head>
    
    	<script type="text/javascript">
    		function addRow(table)
    		{
    			var newRow = document.createElement("tr");
    			var newCol = document.createElement("td");
    			var newTxt = document.createTextNode("Test row 2");
    
    			newCol.appendChild(newTxt);
    			newRow.appendChild(newCol);
    			table.getElementsByTagName("tbody")[0].appendChild(newRow); // appends it to the first tbody element
    		}
    	</script>
    
    	<body onload="addRow(document.getElementById('table'))">
    		<table id="table" style="width:200px; border: thin solid blue;">
    			<tbody>
    				<tr>
    					<td>
    						Test row 1
    					</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Location
    Ontario, Canada
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is an old topic, but, how would you set attributes of each table cell that you're adding? (bgcolor, width, colspan, etc.)

    Thanks

    IC

  • #8
    Regular Coder
    Join Date
    Jul 2003
    Location
    Ontario, Canada
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, nevermind - I figured it out.

    For those who care:

    col1.setAttribute("bgcolor", "#FFFFFF");
    col1.setAttribute("align", "center");
    col1.setAttribute("colspan", "3");

    Easy Peasy

    IC


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •