Bug Tracker

Opened 15 years ago

Closed 15 years ago

Last modified 10 years ago

#418 closed bug (fixed)

<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.html (740 bytes) - added by sam 15 years ago.
Demo
tbodybug.2.html (740 bytes) - added by Sam 15 years ago.
tbody bug demo

Download all attachments as: .zip

Change History (8)

comment:1 Changed 15 years ago by 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>")

Changed 15 years ago by sam

Attachment: tbodybug.html added

Demo

Changed 15 years ago by Sam

Attachment: tbodybug.2.html added

tbody bug demo

comment:2 Changed 15 years ago by 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>

comment:3 Changed 15 years ago by sam

Also you may create the table after the tbody:

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

comment:4 Changed 15 years ago by 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.

comment:5 Changed 15 years ago by Dave

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

comment:6 Changed 15 years ago by brandon

Resolution: fixed
Status: newclosed

Fixed in REV 731 by Dave

Note: See TracTickets for help on using tickets.