Using createElement to insert a new row into a table

Exodious · 07-28-2004, 07:03 PM

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

hemebond · 07-28-2004, 10:43 PM

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.

Exodious · 07-29-2004, 11:00 AM

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>

liorean · 07-29-2004, 12:20 PM

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.

Exodious · 07-30-2004, 10:51 AM

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?

hemebond · 07-30-2004, 10:16 PM

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>

IdentityCrisis · 03-25-2005, 04:49 PM

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

IdentityCrisis · 03-25-2005, 04:54 PM

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