jquery - 如何从 Jquery 获取完整的表格 html？

Question

我正在尝试在 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>标签。

有没有什么办法解决这一问题？非常感谢！

Answer 1

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

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

Answer 2

一种选择是：

document.getElementById('table').outerHTML;

JS 小提琴演示。

或者，您可以改为：

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

JS 小提琴演示。

Answer 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 的答案。