使用jQuery创建表格而不需要tbody

Question

我该如何在jQuery中创建表格，而不让jQuery添加tbody到我的代码中？请参见http://jsfiddle.net/r7BFq/。

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

导致

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

我不希望那样。我想要:

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

- Timothy Clemans

---

没关系，这并不是jQuery的错 :) 他是个好人 - Roko C. Buljan

谁的错？我该如何防止它发生？ - Timothy Clemans

不要使用表格，改为将其添加到 div 中。因为 tbody 默认由浏览器添加。http://jsfiddle.net/sushanth009/r7BFq/1/ - Sushanth --

实际上是浏览器创建了 tbody 元素，而不是 jQuery。 - Ram

Answer 1

为什么要尝试删除tbody？你的浏览器正在试图添加有效HTML的一部分，而你却遗漏了它。这不好吧？

- Raab

---

边框合并(border-collapse)没有起作用，我认为是因为添加了tbody。我使用了边框合并的内联样式(border-collapse inline style)，它可以正常工作。所以我同意你的观点，应该让浏览器使我的HTML代码有效(valid)。 - Timothy Clemans

Answer 2

请尝试此演示 http://jsfiddle.net/d8zVX/

引用 @undefined bruv: 实际上，浏览器创建tbody元素而不是jQuery

进一步阅读：

为什么浏览器仍然在HTML5中注入？

引用

由于历史原因，某些元素具有超出其内容模型所描述的限制。

表元素不能包含tr元素，即使根据本规范中描述的内容模型，这些元素在表元素内技术上是允许的。（如果在标记中将tr元素放入表中，则实际上会暗示tbody开始标记。）

这将满足需求:)

代码

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

工作镜像

- Tats_innit

---

@TimothyClemans 在 pre 标签中显示的是 <tr><td>A</td><td>B</td></tr>，这正是您想要的对吗？其余的浏览器会自动添加 tbody。:) 我使用的是 Mac Air - Lion 操作系统 - Safari 浏览器，无法看到 tbody。http://jsfiddle.net/d8zVX/ :) - Tats_innit

@TimothyClemans 嗯，看到我已经添加了working-image！在pre标签上至少没有tbody。 - Tats_innit

是的，但我希望浏览器运行的代码不包含tbody。 - Timothy Clemans

@TimothyClemans 浏览器通过添加 tbody 使您的表格格式良好，可以阅读以下内容：https://dev59.com/5nI-5IYBdhLWcg3wxrmQ 或者 https://dev59.com/i2s05IYBdhLWcg3wCNhG - Tats_innit

感谢！希望当我在搜索如何添加tbody的JavaScript时，谷歌能够向我展示那些StackOverflow问题，而不是告诉我不要添加tbody的JavaScript等。 - Timothy Clemans

@TimothyClemans :) 会向谷歌抱怨，他坐在我旁边 :) 可能是你附近的集群没有读取MapReduce算法。 :P - Tats_innit

Answer 3

这个完美运作：

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

---

那不是问题/要求的一部分。这段代码确切地实现了所要求的内容。我可以理解如果它在您整个代码的上下文中无法完全工作，但它是对所提问的问题的正确答案。 - Jesse

@Jesse，你不能在div标签内部放置tr标签，这不是有效的标记。 - Korikulum