IE9 - 使用jQuery將html表加載到頁面中

Question

我已經構建了一個非常簡單的示例，通過另一個html頁面中的ajax將表加載到頁面中，並且在除了IE9之外的所有瀏覽器中工作正常，似乎嵌套表。用div替換表格在這裏不是一個選項。 它有什麼解決方法？ （我使用jQuery-1.8.1）

這裏是我的代碼： 的index.html

<table id="table_id"> 
     <thead> 
      <tr> 
       <th>Sort Column 1</th> 
       <th>Sort Column 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1 Data 1</td> 
       <td>Row 1 Data 2</td> 
      </tr> 
      <tr> 
       <td>Row 2 Data 1</td> 
       <td>Row 2 Data 2</td> 
      </tr> 
     </tbody> 
    </table> 
<button>load new data</button> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     var tbl = $('#table_id'); 

     $("button").on("click", function() { 
      var xhr = $.ajax("table.html") 
        .done(function (data) { 
         tbl.html(data); 
        }); 
     }); 
    }); 

</script> 

table.html

<table id="table_id"> 
     <thead> 
      <tr> 
       <th>Sort Heading 1</th> 
       <th>Sort Heading 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1 New Data 11</td> 
       <td>Row 1 New Data 22</td> 
      </tr> 
      <tr> 
       <td>Row 2 New Data 11</td> 
       <td>Row 2 New Data 22</td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

您可以使用.replaceWith

$('#table_id').replaceWith(data); 

因爲.html取代了內部內容。在我們的例子中，使用後.html table看起來像這樣

<table id="table_id"> 
    <table id="table_id"> 
     ... 
    </table> 
</table>