Question

我有一个表格，其中单元格内容是可编辑的。在编辑完表后，我希望表中的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>标记已消失，但我也需要它们。有人知道我能做些什么来获得表格标签吗？

Answer 1

试试这个：

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

应该适用于每个浏览器

Answer 2

使用Element.outerHTML

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

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

Answer 3

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

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

Answer 4

使用outerHTML

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

Check the example on JSfidle

Answer 5

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

这应该有用。

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

5 个答案: