Skip to main content

Bug Tracker

Side navigation

#418 closed bug (fixed)

Opened November 20, 2006 03:00PM UTC

Closed December 20, 2006 03:27AM UTC

Last modified March 15, 2012 02:11PM UTC

<tbody> duplicated

Reported by: sam Owned by:
Priority: major Milestone: 1.1a
Component: core Version: 1.1a
Keywords: tbody,table Cc:
Blocked by: Blocking:
Description

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>"

Attachments (2)
  • tbodybug.2.html (0.7 KB) - added by Sam November 20, 2006 04:56PM UTC.

    tbody bug demo

  • tbodybug.html (0.7 KB) - added by sam November 20, 2006 04:55PM UTC.

    Demo

Change History (6)

Changed November 20, 2006 04:27PM UTC by dave.methvin comment:1

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>")

Changed November 20, 2006 05:00PM UTC by sam comment:2

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>

Changed November 20, 2006 05:03PM UTC by sam comment:3

Also you may create the table after the tbody:

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

Changed November 28, 2006 10:54PM UTC by Dave comment:4

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.

Changed November 29, 2006 02:29PM UTC by Dave comment:5

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

Changed December 20, 2006 03:27AM UTC by brandon comment:6

resolution: → fixed
status: newclosed

Fixed in REV 731 by Dave