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

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

使用outerHTML工作。就像这样：

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

Answer 2

使用Element.outerHTML

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

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

Answer 3

试试这个：

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); 
}); 

这应该工作。