3

How do I create tables in jQuery without tbody being added to my code by jQuery? See http://jsfiddle.net/r7BFq/ 

$('table').html('<tr><td>A</td><td>B</td></tr>');
$('pre').text($('table').html());​

results in

<tbody><tr><td>A</td><td>B</td></tr></tbody>

I don't want that. I want:

<tr><td>A</td><td>B</td></tr>
Timothy Clemans
  • 1,711
  • 3
  • 16
  • 26

3 Answers3

2

Why Would you try to remove tbody. your browser is trying to add the part of valid html, you are missing. Is it not nice?

Raab
  • 34,778
  • 4
  • 50
  • 65
  • border-collapse wasn't working, I thought it was because of tbody being added. I did a border-collapse inline style. It works. So I agree with you that I should allow the browser to make my code HTML valid. – Timothy Clemans Nov 15 '12 at 07:47
1

Try this demo please http://jsfiddle.net/d8zVX/

Quote @undefined bruv: Actually browser creates the tbody element not jQuery

Further read this:

Why do browsers still inject <tbody> in HTML5?

Quote

For historical reasons, certain elements have extra restrictions beyond even the restrictions given by their content model.

A table element must not contain tr elements, even though these elements are technically allowed inside table elements according to the content models described in this specification. (If a tr element is put inside a table in the markup, it will in fact imply a tbody start tag before it.)

This will fit the need :)

Code

$('table').html('<tr><td>A</td><td>B</td></tr>');
var hulk = $('table').html().replace(/<\/?tbody>/g, '');;
$('pre').text(hulk);​

Working Image

enter image description here

Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • @TimothyClemans in the pre tag it shows this `AB` which is what you want right? rest browser will add the `tbody` back anyways. `:)` I am on mac air - Lion O/S - safari browser and cannot see `tbody` http://jsfiddle.net/d8zVX/ `:)` – Tats_innit Nov 15 '12 at 07:46
  • @TimothyClemans hmmm see I have added working-image above now! no `tbody` atleast on `pre` tag. – Tats_innit Nov 15 '12 at 07:52
  • yes but I want the code the browser is running to not have the tbody – Timothy Clemans Nov 15 '12 at 07:54
  • @TimothyClemans Browser makes your table welformed by adding `tbody` read this as well http://stackoverflow.com/questions/1678494/why-does-firebug-add-tbody-to-table **or** http://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5 – Tats_innit Nov 15 '12 at 07:56
  • thanks! wish google had showed me those stackoverflow questions when i was searching for javascript adding tbody, don't add tbody javascript, etc – Timothy Clemans Nov 15 '12 at 07:58
  • @TimothyClemans `:)` Will complain to google, he sits next to me `:)` it must be cluster near you which is not readin mapreduce algo. :P – Tats_innit Nov 15 '12 at 07:59
0

This works perfect:

HTML:

<div id="table_sample"></div>

JQUERY:

$('#table_sample').html('<tr><td>A</td><td>B</td></tr>');
$('#table_sample').text($('#table_sample').html());
Jesse
  • 19
  • 1
  • That wasn't part of the question/requirements. This code does exactly what was asked. I can understand if it doesn't fully work for you in the context of your whole code, but it is a correct answer to the question asked. – Jesse Nov 15 '12 at 07:48
  • @Jesse You can't put a `tr` tag inside a `div` tag, it's not valid markup. – Korikulum Nov 15 '12 at 07:57