<tbody> duplicated

[sam]

When adding <tbody> to a table, you actually end up with two inserted:

var mytable = $("<table>");
var mytbody = $("<tbody>");
mytable.append(mytbody);
alert(mytable.html());

alerts "<tbody><tbody></tbody></tbody>"

The rows don't get duplicated, so if you did

var mytbody = $("<tbody>").append("<tr>");

You would end up with "<tbody><tbody><tr></tr></tbody></tbody>"

[dave.methvin]

I am only seeing this in IE6/7, can you confirm? When you insert "<table>" into innerHTML on IE, both a table and a tbody node come out. jQuery.clean could check for the exact string "<table>" or "<table></table>" to strip off the tbody, but that won't solve the general case of a bare table in a more complex piece of html text. There is nothing wrong with having multiple tbody elements on a table, so it isn't right to check for a previous tbody and remove it.

I think you would be better off using this as your fragment:

$("<table><tbody></tbody></table>")

[sam]

Demo

[Sam]

tbody bug demo

[sam]

This happens to me in Firefox 2.0 as well. It can cause unwanted rendering, when you have a thead section.

$(
	function()
	{
		var mytable = $("<table>");
		var mythead = $("<thead>").append("<tr><th>TH One</th><th>TH Two</th></tr>");
		var mytbody = $("<tbody>").append("<tr><td>TD One</td><td>TD Two</td></tr>");
		mytable.append(mythead).append(mytbody);
		$("#placeholder").append(mytable);
		alert(mytable.html());
	}
)

Results in:

<table>
	<thead>
		<tr><th>TH One</th><th>TH Two</th></tr>
	</thead>
	<tbody>
		<tbody>
			<tr><td>TD One</td><td>TD Two</td></tr>
		</tbody>
	</tbody>
</table>

[sam]

Also you may create the table after the tbody:

if(tbody is not empty) {
var mytable = $("<table>").append(mythead).append(mytbody);
}
else {...

[Dave]

There seem to be two problems here. One is that domManip has a feature of auto-wrapping TR in a TBODY if there isn't already a TBODY in the table. However, it is checking for not-TBODY rather than is-TR, which causes THEAD and TFOOT scenarios to break. I have a fix for that but it isn't a total solution because of...

...the IE-related bug in jQuery.clean. Whenever a "<table>" string is put into innerHTML, IE automatically adds a TBODY if there isn't one. That causes extra TBODY elements that need to be removed. I can't think of a 100% solid way to fix it.

I went ahead and committed these fixes.

[Dave]

I take that back, I didn't commit these fixes but I do have them locally.

[brandon]

Fixed in REV 731 by Dave