將整個表格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); 
}); 

這應該工作。