IE9 - 将 html table 加载到具有 jQuery 的页面中

Question

我构建了一个非常简单的示例，通过 ajax 从另一个 html 页面将 table 加载到一个页面中，它在所有浏览器中都能正常工作，除了 IE9，这似乎嵌套 tables。用 div 替换 table 在这里不是一个选项。它的解决方法是什么？（我正在使用 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>

IE9 - 将 html table 加载到具有 jQuery 的页面中

IE9 - Loading html table into a page with jQuery

html

javascript

ajax

jquery

internet-explorer-9