如何从 Jquery 获取完整的表格 html？ [复制]

Posted 2023-05-07

【中文标题】如何从 Jquery 获取完整的表格 html？ [复制]

【英文标题】：How to get the full table html from Jquery? [duplicate]

【发布时间】：2013-11-09 03:27:28

【问题描述】：

我正在尝试在 Jquery 中获取表格 html。

我有以下几点：

<table id='table' border='1'>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
</table>

我有

var test = $('#table').html()

但是当我 console.log(test) 我得到了

<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>

没有<table> 标签。

有没有办法解决这个问题？非常感谢！

【问题讨论】：

.html() 只检索指定标签内的内容。

【参考方案1】：

更面向 jQuery 的方法是从表中检索 outerHtml 属性。

 $('#table').prop('outerHTML')

【讨论】：

很好，我从来没有考虑过这种方法！ :)

这可以在旧版浏览器上使用吗？

@Blazemonger，我目前无法确认，但 outerHtml() 是一个支持良好的 javascript 函数。

【参考方案2】：

一个选项是：

document.getElementById('table').outerHTML;

JS Fiddle demo.

或者，您可以：

$('<div />').html($('#table').clone()).html();

JS Fiddle demo.

【讨论】：

+1 表示如果没有必要不使用 jQuery。如果你想在 jQuery 中使用它：var table = document.getElementById('table').outerHTML;var jqueryTable = $(table);

【参考方案3】：

另一种选择是将表格包装在其他东西中，然后获取该元素的 html()。

示例标记：

<div class="wrapper">
    <table id='table' border='1'>
        <tr><td>items...</td><td>items2...</td></tr>
        <tr><td>items...</td><td>items2...</td></tr>
        <tr><td>items...</td><td>items2...</td></tr>
        <tr><td>items...</td><td>items2...</td></tr>
    </table>
</div>

还有 jQuery：

var table = $('.wrapper').html();

不过，您可能应该只使用@David Thomas 的答案。