将整个表格 html 代码保存在变量中答案

【问题标题】：Save whole table html code in a variable将整个表格 html 代码保存在变量中
【发布时间】：2017-04-18 23:02:46
【问题描述】：

我有一个表格，其中单元格内容是可编辑的。现在我想要，在我完成编辑表格后，表格中的 html 代码包含所有值。

这是一张表格：

<table class="table table-bordered content">
        <thead>
        <tr>
            <th>bla</th>
            <th>bla bla</th>
            <th>bla bla bla </th>
            <th>more bla</th>
        </tr>
        </thead>
        <tbody>
        <tr contenteditable="true">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr contenteditable="true">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>

<button id="save">Save</button>

这是我的 JS 代码：

    $('#save').on('click', function () {
        var table = $('.content').html();
        alert(table);
    });

问题是，如果我 console.log 表变量我得到这个输出：

  <thead>
        <tr>
            <th>bla</th>
            <th>bla bla</th>
            <th>bla bla bla </th>
            <th>more bla</th>
        </tr>
        </thead>
        <tbody>
        <tr contenteditable="true">
            <td>dwad</td>
            <td>dwada</td>
            <td>dawdaw</td>
            <td>dawdaw</td>
        </tr>
        <tr contenteditable="true">
            <td>daw<br></td>
            <td>daw<br></td>
            <td>dwadaw<br></td>
            <td>daw<br></td>
        </tr>
        </tbody>

如果你仔细观察，你会发现

<table class=" ... "> 和 </table> 标记不见了，但我也需要它们。有人知道我还能做些什么来获得 table-tags 吗？

【问题讨论】：

Get selected element's outer HTML的可能重复

标签： javascript jquery html html-table

【解决方案1】：

试试这个：

var table = $('.content')[0].outerHTML;
alert(table);

应该适用于所有浏览器

【讨论】：

【解决方案2】：

在节点元素上使用outerHTML。像这样：

$('#save').on('click', function () {
    var table = $('.content')[0].outerHTML;
    alert(table);
});

【讨论】：

【解决方案3】：

使用外层HTML

$('.content').get(0).outerHTML

Check the example on JSfidle

【讨论】：

【解决方案4】：

 $('#save').on('click', function () {
        var table = $('.content')[0].html();
        alert(table);
 });

这应该可行。

【讨论】：

【解决方案5】：

使用Element.outerHTML

元素DOM 接口的outerHTML 属性获取描述元素及其后代的序列化HTML 片段。它可以设置为用从给定字符串解析的节点替换元素。

$('#save').on('click', function () {
    var table = $('.content');
    alert(table.get(0).outerHTML);
});

【讨论】：