IE9-使用jQuery将HTML表格加载到页面中

Question

我建立了一个非常简单的示例，通过另一个HTML页面的ajax将表加载到页面中，并且在所有似乎嵌套表的IE9（除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>